乐趣区

关于javascript:隐式类型转换

jiezi

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (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
  1. [] + {}
  • 第一步：[] 调用 toString 返回 ”

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

    故最初答案为 'object object'

总结

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

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

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

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

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

类型 值 to Boolean to Number to String
Boolean true true 1 “true”
Boolean false false 0 “false”
Number 123 true 123 “123”
Number Infinity true Infinity “Infinity”
Number 0 false 0 “0”
Number NaN false NaN “NaN”
String “” false 0 “”
String “123” true 123 “123”
String “123abc” true NaN “123abc”
String “abc” true NaN “abc”
Null null false 0 “null”
Undefined undefined false NaN “undefined”
Function function(){} true NaN “function(){}”
Object {} true NaN “[object Object]”
Array [] true 0 “”
Array [“abc”] true NaN “abc”
Array [“123”] true 123 “123”
Array [“123″,”abc”] true NaN “123,abc”

感激

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

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

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

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

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

退出移动版