欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Javascript隐式强制类型转换

程序员文章站 2022-07-15 10:09:20
...

Javascript隐式强制类型转换
Javascript中让人诟病的技术点不少,类型转换就是其一,甚至《Javascript语言精粹》的作者Douglas Crockford直接将Javascript中的类型转换归为糟粕、鸡肋(PS:据说作者在日常开发中也经常使用到Javascript这一特性,看来万事逃不过真香定律啊)。而类型转换中最让人诟病的就数+ 、 ==操作过分了。但是Javasript的类型转化也不是一无用处。为了让大家在开发过程中用的舒心、放心,于是就有了这篇博文。希望对大家有帮助。

这里直接上各种类型之间的转换结果,如果没有明白,那就带着问题往下读。

+、==、||、&&

+ (重点)

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

总结:

  1. 如果某个操作数是字符串或者能够转换为字符串的话, + 将进行拼接操作。可见在 + 操作中字符串的拼接优先级高于数字的 +。
  2. 如果一个操作数是对象(包括数组),则首先对其调用ToPrimitive操作,该抽象操作再调用[[DefalutValue]],以数字作为上下文,保证了优先调用valueOf()方法,可见在 + 操作时,引用类型内部调用valueOf()方法的优先级高于toString()
  3. 数组或者对象在调用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"

特别说明:

  1. 数组中的toString()方法是经过改写的,故[1,2,3]会转为"1,2,3",[] 会转为""。
  2. 对象的toString()方法会返回 “[object Class]”,Object.prototype.toString.call([]) 返回 “[object Array]”。
  3. [] + {}得到”[object Object]“,而{} + [] 得到 0。这是因为 {} (花括号)在JS中有两种含义:
    1. {} 在 + 后面时,表示对象{}
    2. {} 位于 + 前面时,{} 表示一个独立的空代码块,所以{} + [] 操作相当于进行的是 +[](一元操作符转换操作) 将 [] 转为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给出了明确规范:

  1. 字符串和数字之间的相等比较:
    1. 如果Type(x)是数字,Type(y)是字符串,则返回 x == ToNumber(y)的结果。
    2. 如果Type(x)是字符串,Type(y)是数字,则返回ToNumber(x) == y的结果。
  2. 其他类型值和布尔类型之间的相等比较:
    1. 如果Type(x)是布尔类型,这返回ToNumber(x) == y的结果
    2. 如果Type(y)是布尔类型,则返回x == ToNumber(y) 的结果
  3. null和undefined之间的相等比较
    1. 如果x为null,y为undefined,则结果为true
    2. 如果x为undefined,y为null,则结果为true
  4. 对象和非对象之间的相等比较:
    1. 如果Type(x)是字符串或者数字,Type(y)是对象,则返回x == ToPrimitive(y)的结果
    2. 如果Type(x)是对象,Type(y)是字符串或者数字,则返回toPrimitive(x) == y的结果

== 相等操作中,如果两边的操作数不同的话,都会进行类型转换,而且优先转为数字,再进行比较,如果转换后还不同则再次转换,直到相同为止。这里以 字符串类型 == 布尔类型做介绍:

  1. 首先字符串类型转为Number 类型,这时比较的是 数字类型 == 布尔类型
  2. 再将布尔类型转为Number类型,这时比较的是数字类型 == 数字类型

这也就不难解释为什么"0" == false

如果连个操作数中有引用类型,这会先将引用类型转换为基本类型,在进行上面的操作,进行比较。

再说[] == ![] // true:

  1. 这里!操作的优先级是高于 == 的,![] 首先转换为false
  2. 此时比较双方是 [] == false,这里会将 [] 再次转换为 0
  3. 此时比较双方是 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

总结:

  1. ||与&&返回的都是操作数中两个中的一个,这个严格意义上说并不是一种转换,而是一种选择

  2. 日常开发中的 if (a||b) {return true}的过程,其实是先获取到 a||b的值再进行的判断

  3. 这里说 ||和&&的原因是它可以简化我们日常开发中的代码,使代码更简洁,例:

    18 || "daRui" 
    // 相当于
    18 ? 18 : "daRui"
    
    18 && "daRui" // daRui
    // 相当于
    18 ? "daRui" : 18
    

Javascript隐式强制类型转换

参考文献:

  • 《你不知道的Javascript》中卷
  • Javascript高级程序设计》
  • 《编写可维护的Javascript
  • ECMA5-262标准

Javascript隐式强制类型转换