乐趣区

关于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)

注: 原始类型(undefinednullstringnumberbooleansymbol(es6 新增)

援用类型(Object Array DateRegExp 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:StringNumber 比拟,先将 String 转换为 Number 类型

    1 == '1' // true, '1' 会先变成 1
    ''== 0 // true,'' 会首先变成 0
  • 规定 4:null == undefined比拟后果是 true,除此之外,nullundefined 和其余任何后果的比拟值都为false

    null == undefined // true
    null == '' // false
    null == 1 // false
    null == false // false
    undefined == '' // false
    undefined == 1 // false
    undefined == false // false
  • 规定 5:原始类型 援用类型 做比拟时,援用类型会按照 ToPrimitive( 可在官网文档第七章节第一大节中找到 ) 规定转换为 原始类型

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

    '[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 NumberString

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)

退出移动版