JavaScript隐式转换

290 阅读4分钟

概念:JS在运算时,如果两边数据类型不统一,CPU无法计算,这时编译器会自动将运算符两边的数据做一个数据类型转换,转换成一样的数据类型再进行运算,这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换。

一、算术运算符的隐式转换规则(加、减、乘、除、取余)

1 减、乘、除、取余

在对各种非Number类型运用数学运算符(-、 * 、/ 、%)时,会先将非Number类型转换为Number类型。

例子:

1-true // 0,首先把 true 转换为数字 1,然后执行 1 - 1

1-null // 1, 首先把 null 转换为数字 0,然后执行 1 - 0

1*undefined // NaN, undefined 转换为数字是 NaN

2*['5'] // 10, ['5']首先会变成 '5', 然后再变成数字 5

2 加

为什么加法要区别对待?因为JS里 +还可以用来拼接字符串。

2.1当一侧为String类型,被识别为字符串拼接,并会优先将另一侧转换为字符串类型。

2.2当一侧为Number类型,另一侧为原始类型,则将原始类型转换为Number类型。

2.3当一侧为Number类型,另一侧为引用类型,将引用类型和Number类型转换成字符串后拼接

例子:

123+'123' // 123123 (规则2.1)

123+null // 123 (规则2.2)

123+true // 124 (规则2.2)

123+{} // 123[object Object] (规则2.3)

二、逻辑运算符中的类型转换规则

当我们使用 if while for 语句时,我们期望表达式是一个Boolean,所以一定伴随着隐式类型转换。而这里面又分为两种情况:

1 单个变量

如果只有单个变量,会先将变量转换为Boolean值。只有 null 、undefined、 ''、 NaN、 0、 false 这6个是 false,其他的情况都是 true,比如 {} , []。

2 多个变量(比较运算符)

虽然我们可以严格使用 ===,不过了解==的习性还是很有必要的。根据 == 两侧的数据类型,总结出 5 条规则:

2.1 NaN和其他任何类型比较永远返回false(包括和他自己)。

NaN == NaN // false

2.2 Boolean 和其他任何类型比较,Boolean 首先被转换为 Number 类型。

true == 1  // true

true == '2'  // false, 先把 true 变成 1,而不是把 '2' 变成 true

true == ['1']  // true, 先把 true 变成 1, ['1']拆箱成 '1', 再参考规则2.3

true == ['2']  // false, 同上

undefined == false // false ,首先 false 变成 0,然后参考规则2.4

null == false // false,同上

2.3 String和Number比较,先将String转换为Number类型。

123 == '123' // true, '123' 会先变成 123

'' == 0 // true, '' 会首先变成 0

注意点

console.log("2">"10"); //true '2'.charCodeAt() > '10'.charCodeAt() = 50 > 49 = true

当关系运算符两边都是字符串的时候,此时同时转成number然后比较关系。重点:此时并不是按照Number()的形式转成数字,而是按照字符串对应的unicode编码来转成数字,使用 字符串.charCodeAt(字符下标,默认为0) 方法可以查看字符的unicode编码。

2.4 null == undefined比较结果是true,除此之外,null、undefined和其他任何结果的比较值都为false。

null == undefined // true

null == '' // false

null == 0 // false

null == false // false

undefined == '' // false

undefined == 0 // false

undefined == false // false

2.5原始类型和引用类型做比较时,引用类型会依照ToPrimitive规则转换为原始类型。

ToPrimitive规则,是引用类型向原始类型转变的规则,它一般遵循先valueOf后toString的模式得到一个原始类型。如果还是没法得到一个原始类型,就会抛出 TypeError。函数结构: toPrimitive(input, preferedType?)。input是输入的值,即要转换的对象,必选;preferedType是期望转换的基本类型,他可以是字符串,也可以是数字。选填,默认为number,Date类型的数据preferedType默认是string。

例如:复杂数据类型转成number数据类型:
第一,先使用 valueOf() 方法获取原始值,如果返回的不是基本数据类型,再使用 toString() 方法转成string;
第二,再通过 Number() 方法装成number数据类型

如果转换的类型preferedType是String,即先执行toString()方法。
注意:空数组的toString()方法会得到空字符串,而空对象的toString()方法会得到字符串[object Object]

'[object Object]' == {} // true, 对象和字符串比较,对象通过 toString 得到一个基本类型值

'1,2,3' == [1, 2, 3] // true, 同上  [1, 2, 3]通过 toString 得到一个基本类型值

以上就是隐式转换的规则!

练习题:

console.log({} ==!{}); //false

第一步:{}.valueOf().toString() 得到字符串'[object Object]'
第二步:!{} = false
第三步:Number('[object Object]') == Number(false) 不成立,因为转换到最后 是NaN 和 0比较,所以结果为 false

[] == ![]

第一步,![] 会变成 false

第二步,应用规则2.2 ,题目变成: [] == 0

第三步,应用规则2.5 ,[]的valueOf是0,题目变成: 0 == 0,所以, 答案是 true !

  [undefined] == false

第一步,应用 规则2.5 ,[undefined]通过toString变成 '',题目变成  '' == false

第二步,应用 规则2.2 ,题目变成  '' == 0

第三步,应用 规则2.3 ,题目变成  0 == 0

所以, 答案是 true !

但是 if([undefined]) 又是个true!