关于javascript:隐式类型转换

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (xhs-rookies.com)进行学习，及时获取最新文章。

看到隐式类型转换这个词时，很多开发者就曾经头大了。而其转换时的各种猫腻，置信各位开发者们更是饱受其折磨。

接下来，本文会通过对 ECMAScript 官网文档和各大网站高赞文章进行系统性的总结，务必帮忙大家在读完后彻底把握此知识点。

划重点

你只须要搞清楚两个问题就好了！

1. 类型会转换为哪几类？
2. 什么时候该转化为哪类？

数学运算符中的类型转换

家喻户晓，在 JS 中并没有类型申明，所以任意两个变量或字面量，都能够做加减乘除。

1. 减、乘、除

咱们在对各种非 Number 类型进行数学运算时（- * / ）时，会先将非 Number 类型转换为 Number 类型。

1 - fasle // 1, 首先将 false 转换为数字 0 , 而后再执行 1 - 0
null / 1 // 0, 首先将 null  转换为数字 0 , 而后再执行 0 / 1
1 * undefined // NaN, undefined 转换为数字是 NaN

2. 加法的特殊性

谨记三条规定（优先级从高到低）：

• 当一侧为 String 类型，被辨认为字符串拼接，并会优先将另一侧转换为字符串类型。
• 当一侧为 Number 类型，另一侧为原始类型，则将原始类型转换为 Number 类型。
• 当一侧为 Number 类型，另一侧为援用类型，将援用类型和 Number 类型转换成字符串后拼接。

1 + '1' //’11’（规定 1）1 + null // 1 (规定 2)
1 + true // 2 (规定 2)
1 + {} // '1[object object]'(规定 3)

注: 原始类型（undefined、null、string、number、boolean、symbol(es6 新增)）

援用类型（Object 、Array 、Date、RegExp 、Function）统称为 Object 类型

逻辑语句中的类型转换

当咱们应用 if while for 语句时，咱们冀望表达式是一个 Boolean，所以肯定随同着隐式类型转换。

1. 单个变量

这里有个小 tips：

只有 null undefined '' NaN 0 false 这几个是 false，其余的状况都是 true，比方 {} , []。

2. 应用 == 比拟中的 5 条规定

• 规定 1：NaN 和其余任何类型比拟永远返回 fasle（包含和它本人）

  NaN == NaN // false

• 规定 2：Boolean 和其余任何类型比拟，Boolean 首先会被转换为 Nmuber 类型

  true == 1 // true
  true == '1' // false, 先把 true 变成 1，而不是先把‘1’变成 true

• 规定 3：String和 Number 比拟，先将 String 转换为 Number 类型

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

• 规定 4：null == undefined比拟后果是 true，除此之外，null、undefined 和其余任何后果的比拟值都为false。

  null == undefined // true
  null == '' // false
  null == 1 // false
  null == false // false
  undefined == '' // false
  undefined == 1 // false
  undefined == false // false

• 规定 5：原始类型 和援用类型 做比拟时，援用类型会按照 ToPrimitive( 可在官网文档第七章节第一大节中找到 ) 规定转换为 原始类型

  ToPrimitive规定，是援用类型向原始类型转变的规定，遵循先 valueOf 后toString的模式，冀望失去一个原始类型

  '[object Object]' == {} // 援用类型通过 toString 失去一个类型
  '1,2,3,4' == [1, 2, 3, 4] // 同上

练练手吧

1. [] == ! []

• 第一步：![] 会变为 false
• 这时，变为 [] == false
• 第二步：依据规定 2，这时 Boolean 类型会先转换为 0
• 这时，变为 [] == 0
• 第三步：依据规定 5，这时会调用 ToPrimitive 规定，[]调用 valueOf 返回 [] , 不是原始类型 , 故接着调用
• toString , 返回 ” ;
• 这时，变为 ” == 0
• 第四步：依据规定 3，string 转换为 number，” 转换为 0
  故为 true

2. [] + {}

• 第一步：[] 调用 toString 返回 ”

• 第二步：{} 调用 toString 返回 '[object object]'

  故最初答案为 'object object'

总结

当初回头看看咱们之前的两个问题

1. 最初只会转换为 Boolean 或 Number 或 String

2. 两种场景，数据类型和逻辑类型，对应相干规定进行转换

补充：ToPrimitive 规定产生在援用类型转换，通常是先调用 valueOf 办法、后调用 toString 办法、当调用 valueOf 后，若返回不是原始类型，持续调用 toString 办法，若返回还不是原始类型，则报 TypeError。

援用一张图片给大家做一个完满的总结

感激

最初，感激两位博主的文章帮忙，可能站在伟人的肩膀上做一个以期能帮忙大家的总结。

js 隐式装箱 -ToPrimitive | {XFE} (sinaad.github.io)

JavaScript 隐式类型转换，一篇就够了！(freecodecamp.org)

如果您对此文章还有纳闷，请 git 翻阅官网文档

ECMAScript 2015 Language Specification – ECMA-262 6th Edition (ecma-international.org)