关于JS隐式类型转换的完整总结

原罪
English

不管是在技术聊天群还是论坛里还是在面试官的卷子里,总能碰到 [] + {} == ? 之类的问题,如果你不了解其中的原理,那么就插不上话,只能眼睁睁地等大佬解答了。

类型 Type

说到底还是JS类型转换的问题,首先我们先温习一下JS的8种内置类型:

  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Object
  • Symbol (ES2015)
  • BigInt (ESNext stage 4)

是不是感觉还有Function,毕竟能用typeof获取到?不,函数、数组都是Object的子类型。

类型分为基本类型复合类型两种,除了对象,其它都是基本类型。

To Primitive

发音:[ˈprɪmətɪv]
结构:toPrimitive(input: any, preferedType?: 'string' |'number')
作用:内部方法,将任意值转换成原始值

转换规则:

  1. 如果是基本类型,则不处理。
  2. 调用valueOf(),并确保返回值是基本类型。
  3. 如果没有valueOf这个方法或者valueOf返回的类型不是基本类型,那么对象会继续调用toString()方法。
  4. 如果同时没有valueOf和toString方法,或者返回的都不是基本类型,那么直接抛出TypeError异常。
注意:如果preferedType=string,那么2、3顺序调换。

接着,我们看下各个对象的转换实现

对象valueOf()toString()默认 preferedType
Object原值"[object Object]"Number
Function原值"function xyz() {...}"Number
Array原值"x,y,z"Number
Date数字"Sat May 22 2021..."String
  1. 数组的toString()可以等效为join(","),遇到null, undefined都被忽略,遇到symbol直接报错,遇到无法ToPrimitive的对象也报错。
  2. 使用模板字符串或者使用String(...)包装时,preferedType=string,即优先调用 .toString()。
  3. 使用减法或者Number(...)包装时,preferedType=number,即优先调用.valueOf()
[1, null, undefined, 2].toString() === '1,,,2';

// Uncaught TypeError: Cannot convert a Symbol value to a string
[1, Symbol('x')].toString()

// Uncaught TypeError: Cannot convert object to primitive value
[1, Object.create(null)].toString()

ToNumber

一些特殊值转为数字的例子,等下要用到

Number("0") === 0;
Number("") === 0;
Number("   ") === 0;
Number("\n") === 0;
Number("\t") === 0;
Number(null) === 0;
Number(false) === 0;

Number(true) === 1;

Number(undefined); // NaN
Number("x"); // NaN

加减法 +-

加减法运算中遵循了一些隐式转换规则:

遇到对象先执行ToPrimitive转换为基本类型

  • 加法(+)运算,preferedType是默认值
  • 减法(-)运算,preferedType是Number
// {}.toString() === "[object Object]"
1 + {} === "1[object Object]"

// [2, 3].toString() === "2,3"
1 + [2, 3] === "12,3"
[1] + [2, 3] === "1,2,3"

function test() {}
// test.toString() === "function test() {}"
10 + test === "10function test() {}"

字符串 + 任意值,会被处理为字符串的拼接

这里的任意值都是指基本类型,因为对象会先执行ToPrimitive变成基础类型

1 + "1" === "11"
1 + 1 === 2
1 + 1 + "1" === "21"
"1" + 1 === "11"
"1" + "1" === "11"
1 + "1" + 1 === "111"
"1" + false === "1false"
"1" + null === "1null"
"X" + undefined + false === "Xundefinedfalse"

非字符串 + 非字符串,两边都会先ToNumber

这里的非字符串都是指基本类型,因为对象会先执行ToPrimitive变成基础类型

1 + true === 2
1 + false === 1
1 + null === 1
1 + null + false + 1 === 2
1 + undefined // NaN
1 + undefined + false // NaN
1 + undefined + [1] === "NaN1"
1 + undefined + "1" === "NaN1"
null + null === 0

// 1 + false
1 + ![] === 1
1 + !{} === 1
!{} + !{} === 0

任意值 - 任意值,一律执行ToNumber,进行数字运算。

此时的 preferedType === number

3 - 1 === 2
3 - '1' === 2
'3' - 1 === 2
'3' - '1' - '2' === 0

// [].toString() => "" => Number(...) => 0
3 - [] === 3

// {}.toString() => "[object Object]" => Number(...) => NaN
3 - {} // NaN

// Date的默认preferedType === string
var date = new Date();
date.toString = () => 'str';
date.valueOf = () => 123;

date + 1 === 'str1';
date - 1 = 122;

+ x 和 一元运算 +x 是等效的(以及- x),都会强制ToNumber

+ 0 === 0
- 0 === -0

+ new Date() === 1623251729456


// 1 + (+"1")
1 + + "1" === 2

// 1 + (+(+(+["1"])))
1 + + + + ["1"] === 2

// 1 + (-(+(-[1])))
1 + - + - [1] === 2

// 1 - (+(-(+1)))
1 - + - + 1 === 2

1 - + - + - 1 === 0

// 1 + [""]
1 + + [""] === 1

// ["1", "2"].toString() => "1,2" => Number(...) => NaN
1 + + ["1", "2"] // NaN

// 吃根香蕉🍌
// "ba" + (+undefined) + "a" => "ba" + NaN + "a"
("ba" + + undefined + "a").toLowerCase() === "banana"

回到一开始抛出的问题[] + {},这样太简单了吧?

[].toString() === "";
{}.toString() === "[object Object]";

[] + {} === "[object Object]";

{} 在最前面时可能不再是对象

不是对象是什么?是你的八块腹肌?别急,看看经典的例子

{} + [] === 0;
{ a: 2 } + [] === 0;

这啥玩意?说好的"[object Object]"呢?

好吧,这是{}其实代表的是代码块,最后就变成了+ [],根据前面的原则,数组先被转换成字符串"",接着因为+x的运算,字符串被转成数字0

那 { a: 2 } 总该是对象了吧?其实这时候a不是代表对象属性,而是被当成了标签(label),标签这东西IE6就已经有了。所以如果我们写成对象是会报错的,逗号要改成分号才能通过编译。

// Uncaught SyntaxError: Unexpected token ':'
{ a: 2, b: 3 } + []

// 分号OK
{ a: 2; b: 3 } + [] === 0;

⚠️注意:在 Node >= 13.10.0 的版本,{}被优先解释为空对象,仅在非对象结构的情况才会被认为是代码块。

// nodeJs >= 13.10.0 的运行结果

{} + [] === "[object Object]";
{ a: 2 } + [] === "[object Object]";
{ a: 2, b: 3 } + [] === "[object Object]";

// 注意是分号,当成代码块
{ a: 2; b: 3 } + [] === 0;
// 有JS语句或者表达式,当成代码块
{ var a = 1; } + [] === 0;
{ ; } + [] === 0;
{ 123 } + [] === 0;
{ 1 + 2 } + [] === 0;

定论还是下的太早了,我们还是有办法让引擎优先处理成代码块

// 所有node版本

;{} + [] === 0;
;{ a: 2 } + [] === 0;

// Uncaught SyntaxError: Unexpected token ':'
;{ a: 2, b: 3 } + [];

加个分号?有趣。


在使用这个刺激的规则前,你需要记住的是,代码块 {} 必须在最前面,否则它就是对象,但也有特例(分号)。

console.log({} + []); // "[object Object]"
alert({} + []); // "[object Object]"

function test(x) { console.log(x); }
test({} + []); // "[object Object]"

var result = {} + [];
console.log(result); // "[object Object]"

({}) + [] === "[object Object]"

!{} // !对象 => false

{} // 对象
{ a: 2 } // 对象
{ a: 2, b: 3 } // 对象

{ a: 2; b: 3 } // 代码块
;{ a: 2 } // 代码块
{ a: 2 }; // 代码块

symbol不能加减

如果在表达式中有symbol类型,那么就会直接报错。比如1 + Symbol("x")报错如下:

Uncaught TypeError: Cannot convert a Symbol value to a number

宽松相等 ==

相等于全等都需要对类型进行判断,当类型不一致时,宽松相等会触发隐式转换。下面介绍规则:

对象 == 对象,类型一致则不做转换

{} != {}
[] != {}
[] != []

对象 == 基本值,对象先执行ToPrimitive转换为基本类型

// 小心代码块
"[object Object]" == {}
[] == ""
[1] == "1"
[1,2] == "1,2"

布尔值 == 非布尔值,布尔值先转换成数字,再按数字规则操作

// [] => "" => Number(...) => 0
// false => 0
[] == false

// [1] => "1" => 1
// true => 1
[1] == true

// [1,2] => "1,2" => NaN
// true => 1
[1,2] != true

"0" == false
"" == false

数字 == 字符串,字符串ToNumber转换成数字

"2" == 2
[] == 0
[1] == 1
// [1,2].toString() => "1,2" => Number(...) => NaN
[1,2] != 1

null、undefined、symbol

null、undefined与任何非自身的值对比结果都是false,但是null == undefined 是一个特例。

null == null
undefined == undefined
null == undefined

null != 0
null != false

undefined != 0
undefined != false

Symbol('x') != Symbol('x')

对比 < >

对比不像相等,可以严格相等(===)防止类型转换,对比一定会存在隐式类型转换。

对象总是先执行ToPrimitive为基本类型

[] < [] // false
[] <= {} // true

{} < {} // false
{} <= {} // true

任何一边出现非字符串的值,则一律转换成数字做对比

// ["06"] => "06" => 6
["06"] < 2   // false 

["06"] < "2" // true
["06"] > 2   // true

5 > null     // true
-1 < null    // true
0 <= null    // true

0 <= false   // true
0 < false    // false

// undefined => Number(...) => NaN
5 > undefined // false

To Boolean

既然是总结,那么可能还要讲一下布尔值的隐式转换。这个还是比较常见的,我们来看下有哪些地方会使用到:

  • if(...)
  • for(;...;)
  • while(...)
  • do while(...)
  • ... ? :
  • ||
  • &&

既然知道会转换,那么什么值是真值,什么值是假值呢?换个思路,假值以外都是真值。看看哪些是假值

  • undefined
  • null
  • false
  • +0
  • -0
  • NaN
  • ""

还有吗?

总结

对象都需要先ToPrimitive转成基本类型,除非是宽松相等(==)时两个对象做对比。

  • +     没有字符串就全转数字
  • -     全转数字,preferedType===Number
  • ==  同类型不转,数字优先,布尔全转数字,null、undefined、symbol不转
  • <>  数字优先,除非两边都是字符串

欢迎纠正错误,欢迎学习交流收藏。我是原罪,一个极客。

阅读 1k

全栈那些事
授人以鱼不如授人以渔

极客

3.2k 声望
1.2k 粉丝
0 条评论
你知道吗?

极客

3.2k 声望
1.2k 粉丝
文章目录
宣传栏