js入门:解密类型转换:

作者: 好奇男孩 | 来源:发表于2018-03-18 00:27 被阅读12次

JS是弱类型,进行类型转化十分方便,这让人又爱又恨,因为它很方便,也很容易让你搞错,但是掌握以下技巧,你可以轻松面对绝大部分场景。

一·if的判断:

对于括号里的表达式,会被强制转换为布尔类型注意尽量不要这样使用,它会让怀疑你的直觉,但遇到这种问题,你必须清楚的知道,为什么会这样;

1.如下代码输出什么

var a = 2
if(a = 1) {
    console.log('a等于1')
}else{
    console.log('a不等于1')
}
\\a等于1

这是直接赋值,不会做比较;

2.如下代码输出什么,对比为什么会产生区别;

if ("hello") {
    console.log("hello")
}
\\hello
if ("") {
    console.log('empty')
}
\\undefined
if (" ") {
    console.log('blank')
}
\\blank
if('0.00'){
  console.log('0.00')
}
\\ 0.00

字符串转换为布尔型:空字符串为 false,其他都为 true

3.如下代码输出什么?

if ([0]) {
    console.log('array')
}
\\ array

任何对象转换成布尔型,都是true

4.如下代码输出什么?

if(NaN){
  console.log('0.00')
}
\\undefined

Number转换为布尔型; +0, −0, 或者 NaN 为 false, 其他为 true;

以上四点是需要重点注意的,以下还有一些比较常规的,更多请看下面:

26.jpg

二 、a==b的判断:

==在比较的时候可以转换数据类型,若等式两边数据类型不匹配,将会往数值类型方向转换后再进行比较

27.jpg
"" == 0  //ture
" " == 0  //ture
"" == true  //false
"" == false  //ture
" " == true  //false
" " == true  //false
" " == false  //ture
"hello" == true  //false
"hello" == false //false
"0" == true  //false
"0" == false  //true
"00" == false  //true
"0.00" == false  //true
undefined == null  //ture
 true =={} //false
[] == true  //false
var obj = { 
  a: 0, 
  valueOf: function(){return 1} 
} 
obj == "[object Object]"  //false
obj == 1  //true
obj == true  //true

转换为数值型:


28.png

注意对象转化成数值为NaN,数组则不一定


1.png

总结:

  • 如果两个值类型相同,则执行严格相等的运算
  • 如果两个值的类型不同
  • 如果一个是null,一个是undefined,那么相等
  • 如果一个是数字,一个是字符串,先将字符串转为数字,然后比较
  • 如果一个值是true/false则将其转为1/0比较
  • 如果一个值是对象,一个是数字或字符串,则尝试使用valueOf和toString转换后比较
  • 其它就不相等了

推荐最好使用严格等于(===)

===是严格意义的相等,只需注意NaN和NaN不等就行了

注意:

  • 1.undefined == null ;(每门语言都有不少坑,个人认为这就是JS其中的一个坑)
  • 2.如果两个操作值都是对象,则比较它们是不是指向同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回true,否则,返回false

三.比较大小

1.同类型之间可以通过大于,小于;(数值型,字符串型)

3>1
\\true
'b'>'a'
\\true
"a">"1"
\\true
"a">1
\\false;想了解为什么看如下
"3">1
\\true;推荐不这样使用,字符串转化成数值很可能是NaN;

.通过相减比较大小,(数值型)

3-1
\\2

注意:

1.非数字字符串不能与数字,做除"+"以外的算数运算(它会把字符串转换成数值再计算);所以字符串不能通过减法比较大小;

'2' - 1
//1
"a" - 1
//NaN
'b'-'a'
//NaN
"3"-"1"
//2

四、通过关系运算符:

.'<',">","<=",">=",的比较''==”,类似,在比较的时候会转换数据类型,若等式两边数据类型不匹配,将会往数值类型方向转换后再进行比较;

'a'>1
//false
'a'<1
//false
'a'==1
//false
"a"<"b"
//true
'3'>1
//true

所以字母字符与数值之间无法之间比较大小;但可以通过将数字转化成字符串后在比较大小;

"a">"1"
\\true

通过ascii码比较,"1"的码值是48,"a"的码值是97,所以a<c

总结:

关系运算符

  • 两个操作数都是数值,则进行数值比较
  • 两个操作数都是字符串,则比较两个字符串对应的字符编码值
  • 两个操作数有一个是数值,则将另一个转换为数值,再进行数值比较
  • 两个操作数有一个是对象,则先调用valueOf()方法或toString()方法,再用结果比较
"3">'1'
\\true
var num = '3'>22;//false
var num = '3'>'22';//true,进行第一个数字的比较3>2,所以是true
var num = 'a'>'b';//false,a=97,b=98,ASCII表
var num = 'a'>'B';//true,B=66

更多参考:详解js运算符
作者:彭荣辉
链接:https://www.jianshu.com/u/0f804364a8a8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

  • js入门:解密类型转换:

    JS是弱类型,进行类型转化十分方便,这让人又爱又恨,因为它很方便,也很容易让你搞错,但是掌握以下技巧,你可以轻松面...

  • JS 类型转换

    JS 类型转换 1. if 的判断 JS 是如何处理的?解密:对于括号里的表达式,会被强制转换为布尔类型。原理: ...

  • javaScript中数据类型转换方法

    JS 数据类型转换 方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供了...

  • 数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供了...

  • js入门之路------类型转换

    js 中两个类型相加 1、number类型+其他类型: I、number+string,例如: II、number...

  • JavaScript类型转换

    在js中数据类型转换一般分为两种,即强制类型转换和隐式类型转换(利用js弱变量类型转换)。 强制类型转换 即通过使...

  • 前端开发入门到实战:JavaScript字符串转换数字

    js 字符串转换数字方法主要有三种: 转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供...

  • 前端开发入门到实战:JavaScript字符串转换数字

    js 字符串转换数字方法主要有三种: 转换函数、强制类型转换、利用js变量弱类型转换。 1. 转换函数: js提供...

  • js中的类型转换

    在js中数据转换分为3种:隐式类型转换,强制类型转换,函数转换 1.隐式类型转换 (1):运算符转换 js中的值在...

  • 解密类型转换

    if判断解密 对于括号里的表达式,会被强制转换为布尔类型 原理 ==判断解密 toNumber toPrimiti...

网友评论

    本文标题:js入门:解密类型转换:

    本文链接:https://www.haomeiwen.com/subject/onesqftx.html