JavaScript隐式类型转换

JavaScript隐式类型转换基本数据类型ECMAScript 一共定义了七种 build-in types，其中六种为 Primitive Value，Null， Undefined，String， Number， Boolean， Symbol。而最后一种 Object build-in type 与通常意义上的 JavaScript 中 Object 并不一样，总的来说，只要不属于 Primitive Value 的值，就属于 Object 类型，比如数组、对象、日期、正则、函数。装箱转换每一种基本类型 number, string, boolean, symbol 在 Object(build-in type) 中都有对应的类。所谓装箱转换，正是把基本类型转换为对应的对象，他是类型转换中一种相当重要的种类。JavaScript 语言设计上试图模糊对象和基本类型之间的关系，比如，我们可以直接在基本类型上使用对象的方法：console.log(‘abc’.charAt()); // a甚至我们在原型上添加方法，都可以应用于基本类型。实际上是 . 运算符提供了装箱操作，它会根据基础类型构造一个临时对象，使得我们能在基础类型上调用对应对象的方法。拆箱转换在 JavaScript 标准中，规定了 ToPrimitive 函数，它是对象类型到基本类型的转换（即，拆箱转换）。对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换，把对象变成基本类型，再从基本类型转换为对应的 String 或者 Number。拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在，或者没有返回基本类型，则会产生类型错误 TypeError。ToPrimitiveToPrimitive 用于将 Object 转为 Primitive Value对于我们平常遇到的 Object，其处理逻辑是：调用 Object.valueOf，如果结果是 Primitive Value，则返回;调用 Object.toString，如果结果是 Primitive Value，则返回;都不是，返回 TypeError普通对象和数组的这两个方法返回的结果如下：var a = [12]var b = {a: 123}// [12]a.valueOf()// ‘12’a.toString()// {a: 123}b.valueOf()// ‘[object Object]‘b.toString()如上，两者的 valueOf 返回的都不是 Primitive Value (返回了自身，还是 Object 类型)。那么，根据规范，两者调用 ToPrimitive 返回的将是一个字符串。显示类型转换ToBoolean这个方法用于将不是 Boolean 类型的值转换为 Boolean 类型。Undefined 返回 falseNull 返回 false所有 Object 类型都会被转换为 true;Number 类型中，0，NaN 会被转换为 false，其它都为 true只有空字符串为 false，其它都为 trueToNumber其它类型转换为 Number 类型。Undefined 返回 NaNNull 返回 0Boolean 类型，true 为 1； false 为 0String 类型，如果满足数字语义则转为数字，否则转换为 NaNObject 类型，先转换为 Primitive Value 再递归调用自身 ToNumber 来转换。// ‘56’ ==> 56Number([56])// ‘,56’ ==> NaNNumber([,56])// ‘55,56’ ==> NaNNumber([55, 56])ToStringNumber 返回对应数值字符串Boolean 返回字符串 “true” 或者 “false”Undefined 返回 “undefined”Null 返回 “null”隐式类型转换了解了上面的知识，可以开始进入我们的正题了，在 JavaScript 中可以触发隐式类型转换的操作有：四则运算: +, -, *, /比较运算符: ==, <, >, >=, <=判断语句: if, whileNative调用: console, alet 输入时会自动转换成 String 类型逻辑非 !，将直接调用 ToBoolean 方法，然后取反返回。比较运算符非严格比较（==）如果 Type 相同，等价于 A === B特别的, undefined == nullString == Number，则把 String 转换成 Number有 Boolean 值的，将 Boolean 转换成 NumberObject String/Number/Symbol，将 Object 转换成 Primitive Value否则，返回 false// ‘12’ ==> 12;// 返回 true12 == ‘12’// 转 boolean: [] == 0// 转 object: ’’ == 0// 转 string: 0 == 0// 返回 true[] == false// 转 object: ‘45’ == 45// 转 string: 45 == 45// 返回 true[45] == 45// 单目: {} == false// 转 boolean: {} == 0// 转 object: ‘[object Object]’ == 0// 转 string: NaN == 0// 返回 false{} == !{}// 单目：[] == fasle// 转 boolean： [] == 0// 转 array: "" == 0// 转 string: 0 == 0// 返回 true[] == ![][] == [][] == 0严格比较 (===)类型不同，直接返回 falseNumber 类型判断：有 NaN 就 false；特别的 +0 === -0；最后调用 SameValueNonNumber另外 != 和 !== 则是指出了 A != B 与 !(A == B) 是完全等价的。在判断 !=/!== 时，其实就是在判断 ==/===.不等关系两边操作数调用 ToPrimitive 转换为 Primitive Value由于 Primitive Value 出来有 String 和 Number 两种结果，分别有不同的比较规则；如果两边的值都是 String，则按 code unit 比较，如果一边是 Number，则将另一边也转换为 Number;注意 Number 需要处理 +0/-0/NaN/Infinity 等情况// 注意转换后为 ‘45’ < ‘46’// 按字符串规则比较最终比较的是 ‘5’.charCodeAt() < ‘6’.charCodeAt() => 53 < 54// 返回 true[45] < [46]// 同理 [10] < [9] 最后进行的是 ‘10’ < ‘9’ 的比较，是字符串之间的笔记，不会转换为数字间的比较，// 其实最终比较的是 ‘1’.charCodeAt() < ‘9’.charCodeAt() => 49 < 57.[10] < [9]练习题// 每个表达式是 true 还是 false 呢？为啥呢？// 初阶!{}12 == ‘12’‘false’ == falsenull == undefined// 高阶[] == [][] == false[] === false[45] == 45// 终阶[45] < [46] ?[10] < [9] ?{} == !{}{} != {}-0 === +0NaN === NaNNaN != NaN// 转换条件转换后类型结果[]+[] // String “”[1,2]+[3,4] // String “1,23,4”[]+{} // String “[object Object]”[1,2] + {a:1} // String “1,2[object Object]”{}+[] // Number 0{}+[1] //Number 1{a:1}+[1,2] // Number NaN{a:1}+{b:2} // Chrome - String “[object Object][object Object]” (背后实现eval){a:1}+{b:2} // Firefox - Number NaNtrue+true // Number 21+{a:1} // String “1[object Object]”referenceJavaScript 中的隐式类型转换的规范JavaScript 运算符规则与隐式类型转换详解JavaScript类型：关于类型，有哪些你不知道的细节？深入浅出弱类型JS的隐式转换JavaScript字符串间的比较ecma-sec-relational-operators