Y004-隐式转换2
Javascript 隐式强制类型转换
这里直接上各种类型之间的转换结果,如果没有明白,那就带着问题往下读。
❞
+、==、||、&&
+ (重点)
1 + "1" // '11'
1 + "string" // "1tring" (加非数字字符串)
1 + true // 2
1 + false //1
1 + [] // "1"
1 + [1,2,3] // "11,2,3"
1 + {} // "1[object Object]"
1 + null // 1
1 + undefined // 1
null + undefined // NaN
true + 1 // 2
true + "1" // "true1"
true + "true" // "truetrue" (加非数字字符串)
true + true // 2
true + false // 1
true + [] // "true"
true + [1,2,3] // "true1,2,3"
true + "true[object Object]" // NaN
true + null // 1
true + undefined // NaN
false + 1 // 1
false + "1" // "false1"
false + "string" // "falsestring" (加非数字字符串)
false + false // 0
false + true // 1
false + [] // "false"
false + {} // "false[object Object]"
[] + 1 // "1"
[] + "1" // "1"
[] + "string" // "string" (加非数字字符串)
[] + true // "true"
[] + false // "false"
[] + [] // ""
[1] + [1] // "11"
[] + {} // "[object Object]" (注意!!!)
[] + null // "null"
[] + undefined // "undefined"
{} + 1 // 1
{} + "1" // 1
{} + "string" // NaN
{} + true // 1
{} + false // 0
{} + [] // 0 (注意!!!)
{ a:1 } + [] // 0(注意!!!)
{} + [1] // 1 (注意!!!)
{} + [1,2,3] // NaN (注意!!!)
{} + {} // "[object Object][object Object]"
{} + null // 0
{} + undefined // NaN
-Infinity + Infinity // NaN
总结:
如果某个操作数是字符串或者能够转换为字符串的话, + 将进行拼接操作。可见在 + 操作中字符串的拼接「优先级」高于数字的 +。 如果一个操作数是对象(包括数组),则首先对其调用ToPrimitive操作,该抽象操作再调用[[DefalutValue]],以数字作为上下文,保证了优先调用valueOf()方法,可见在 + 操作时,引用类型内部调用valueOf()方法的「优先级」高于toString()。 数组或者对象在调用valueOf()方法如果无法获取到基本类型值(数字),会转而调用toString()。 代码演示:
// 这里提供valueOf()方法,
var daRui = {
valueOf: function() {
return 18
},
toString: function() {
return "daRUI"
}
}
daRui + 7 // 25
daRui + "7" // "187"
daRui + "hello" // "18hello"
// 这里仅提供toString()方法,
var daRui = {
toString: function() {
return "daRUI"
}
}
daRui + 7 // "daRUI7"
daRui + " hello" // "daRUI hello"
特别说明:
数组中的toString()方法是经过改写的,故[1,2,3]会转为"1,2,3",[] 会转为""。 对象的toString()方法会返回 "[object Class]",Object.prototype.toString.call([]) 返回 "[object Array]"。 [] + {}得到”[object Object]“,而{} + [] 得到 0。这是因为 {} (花括号)在JS中有两种含义: 当 {} 在 + 后面时,表示对象{} 当 {} 位于 + 前面时,{} 表示一个独立的「空代码块」,所以{} + [] 操作相当于进行的是 + 将 [] 转为0 ==(重点)
1 == '1' // true
1 == true // true
1 == [] // false
1 == [1] // true
1 == {} // false
true == "1" // true
true == "true" // false
true == [] // true
true == [1] // true
true == {} // false
[] == "1"// false
[] == true // false
[] == false // true
[] == [] // false (注意!!!)
[] == {} // false
[] == ![] // true (注意!!!)
{} == 1 // Unexpected token '=='
{} == "1" // Unexpected token '=='
{} == true // Unexpected token '=='
{} == false // Unexpected token '=='
{} == [] // Unexpected token '=='
{} == {} // false (注意!!!)
"0" == null // false
"0" == undefined // false
"0" == false // true (注意!!!)
"0" == NaN // false
"0" == 0 // true
"0" == "" // false
false == null // false (注意!!!)
false == undefined // false (注意!!!)
false == NaN // false
false == 0 // true (注意!!!)
false == "" // true (注意!!!)
false == [] // true (注意!!!)
false == {} // false
"" == null // false
"" == undefined //false
"" == NaN // false
"" == 0 //true (注意!!!)
"" == [] // true (注意!!!)
"" == {} // false
0 == null // false
0 == undefined // false
0 == NaN // false
0 == [] // true (注意!!!)
0 == {} // false
+0 == -0 // true
null == null // true
null == undefined // true (注意!!!)
null == "" // false
null == 0 // false
undefined == "" // false
undefined == 0 // false
NaN == NaN // false 可以使用isNaN() 判断是不是NaN
总结:
== 操作,最重要的时在两个操作数的转换过程!关于 == 操作ES5 规范11.9.3给出了明确规范:
字符串和数字之间的相等比较:
如果Type(x)是数字,Type(y)是字符串,则返回 x == ToNumber(y)的结果。 如果Type(x)是字符串,Type(y)是数字,则返回ToNumber(x) == y的结果。 其他类型值和布尔类型之间的相等比较:
如果Type(x)是布尔类型,这返回ToNumber(x) == y的结果 如果Type(y)是布尔类型,则返回x == ToNumber(y) 的结果 null和undefined之间的相等比较
如果x为null,y为undefined,则结果为true 如果x为undefined,y为null,则结果为true 对象和非对象之间的相等比较:
如果Type(x)是字符串或者数字,Type(y)是对象,则返回x == ToPrimitive(y)的结果 如果Type(x)是对象,Type(y)是字符串或者数字,则返回toPrimitive(x) == y的结果 对象和对象之间比较:
在Javascript中对象属于引用类型,对象之间的比较,本质比较的是内存地址。所以都为false。
❝ == 相等操作中,如果两边的操作数不同的话,都会进行类型转换,而且优先转为数字,再进行比较,如果转换后还不同则再次转换,直到相同为止。这里以 字符串类型 == 布尔类型做介绍:
首先字符串类型转为Number 类型,这时比较的是 数字类型 == 布尔类型 再将布尔类型转为Number类型,这时比较的是数字类型 == 数字类型 这也就不难解释为什么"0" == false了
如果连个操作数中有引用类型,这会先将引用类型转换为基本类型,在进行上面的操作,进行比较。
再说[] == ![] // true:
这里!操作的优先级是高于 == 的,![] 首先转换为false 此时比较双方是 [] == false,这里会将 [] 再次转换为 0 此时比较双方是 0 == false,接下来就不难理解了 ❞ !!、&&、||(重点) !! 将值转为布尔值
// 除将下面的转为false其余全部为true
!! ""
!! 0
!! -0
!! +0
!! null
!! undefined
!! NaN
&&、|| ❝ &&与||逻辑运算符的特殊之处在于,两者返回的是两个操作数中的一个(且仅一个),即选择两个操作数中的一个,然后返回它的「值」。这两个逻辑运算符首先会对第一个操作数执行条件判断,如果其不是布尔值就先进行ToBoolean强制类型转换,然后在执行条件判断。
对于||来说,如果条件判断结果为true就返回第一个操作数的值,如果为false就返回第二个操作数的值。
&&则相反,如果条件判断结果为true就返回第一个操作数的值,如果为false就返回第一个操作数的值。
——《你不知道的Javascript上卷》
❞
18 || "daRui" // 18
undefined || "daRui" // "daRui"
18 && "daRui" // daRui
null && "daRui" // null
null || {} // {}
null && {} // null
总结:
||与&&返回的都是操作数中两个中的一个,这个严格意义上说并不是一种转换,而是一种选择
日常开发中的 if (a||b) {return true}的过程,其实是先获取到 a||b的值再进行的判断
这里说 ||和&&的原因是它可以简化我们日常开发中的代码,使代码更简洁,例:
18 || "daRui"
// 相当于
18 ? 18 : "daRui"
18 && "daRui" // daRui
// 相当于
18 ? "daRui" : 18
在 JavaScript,常见的 false 值:
0, '0', +0, -0, false, '',null,undefined,null,NaN