不管是在技术聊天群还是论坛里,总能碰到 x + y 等于多少的问题,比如 [] + {} == ?
,如果你不了解其中的原理,那么就插不上话,只能眼睁睁地等大佬解答了。
说到底还是JS类型转换的问题,首先我们先温习一下JS的7种内置类型:
是不是感觉还有Function,毕竟能用typeof获取到?不,函数、数组都是Object的子类型。
类型分为基本类型
和复合类型
两种,除了对象,其它都是基本类型。
发音:[?pr?m?t?v]
结构:toPrimitive(input, preferedType = number)
在对象的隐式转换中,对象需要先转成基本类型,并按照如下顺序执行。
valueOf()
。toString()
方法。TypeError
异常。Uncaught TypeError: Cannot convert object to primitive value
接着,我们看下各个对象的转换实现
对象 | valueOf() | toString() |
---|---|---|
Object | 原值 | 字符串 => '[object Object]' |
Function | 原值 | 字符串 => 'function xyz() {...}' |
Array | 原值 | 字符串 => 'x,y,z' |
Date | 数字时间戳 | 字符串 => "Sat May 22 2021..." |
Date的默认preferedType=string,即在加法运算中先执行toString()。在 - | * | / | +x | -x 等运算中,先执行valueOf()
数组的toString()可以等效为
join(',')
其中,数组toString()时,遇到null, undefined都被忽略,遇到symbol直接报错,遇到没有toString()的对象也报错。
[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()
一些特殊值转为数字的例子,等下要用到
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
加减法运算中遵循了一些隐式转换规则:
({}).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() {}"
字符串拼接
上面的对象最后也都转成了字符串,遵循本条规则。接着来几个纯字符串的例子
1 + "1" === "11"
1 + 1 === 2
"1" + 1 === "11"
"1" + "1" === "11"
3 - 1 === 2
3 - '1' === 2
'3' - 1 === 2
// [].toString() => "" => Number(...) => 0
3 - [] === 3
// {}.toString() => "[object Object]" => Number(...) => NaN
3 - {} // NaN
1 + true === 2
1 + false === 1
1 + null === 1
1 + undefined // NaN
+ 0 === 0
- 0 === -0
1 + + "1" === 2
1 + + + + ["1"] === 2
// 负负得正
1 + - + - [1] === 2
// 负负得正
1 - + - + 1 === 2
1 - + - + - 1 === 0
1 + + [""] === 1
// ["1", "2"].toString() => "1,2" => Number(...) => NaN
1 + + ["1", "2"] // NaN
// 吃根香蕉??
("ba" + + undefined + "a").toLowerCase() === "banana"
回到一开始抛出的问题[] + {}
,这样太简单了吧?
[].toString() === "";
{}.toString() === "[object Object]";
[] + {} === "[object Object]";
不是对象是什么?是你的八块腹肌?别急,看看经典的例子
{} + [] === 0;
{ a: 2 } + [] === 0;
这啥玩意?说好的"[object Object]"呢?
好吧,这是{}
其实代表的是代码块,最后就变成了+ []
,根据前面的原则,数组先被转换成字符串""
,接着因为+x的运算,字符串被转成数字0
。
那 { a: 2 } 总该是对象了吧?其实这时候a
不是代表对象属性,而是被当成了标签(label),标签这东西IE6就已经有了。所以如果我们写成 { a: 2, b: 3 } + []
这样是会报错的,逗号要改成分号才能通过编译。
如果在表达式中有symbol类型,那么就会直接报错。比如1 + Symbol("x")
报错如下:
Uncaught TypeError: Cannot convert a Symbol value to a number
相等于全等都需要对类型进行判断,当类型不一致时,宽松相等会触发隐式转换。下面介绍规则:
{} != {}
[] != {}
[] != []
// 小心代码块
"[object Object]" == {}
[] == ""
[1] == "1"
[1,2] == "1,2"
"2" == 2
[] == 0
[1] == 1
// [1,2].toString() => "1,2" => Number(...) => NaN
[1,2] != 1
// [] => "" => 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
null、undefined与任何非自身的值对比结果都是false,但是null == undefined
是一个特例。
null == null
undefined == undefined
null == undefined
null != 0
null != false
undefined != 0
undefined != false
Symbol('x') != Symbol('x')
对比不像相等,可以严格相等(===)防止类型转换,对比一定会存在隐式类型转换。
[] < [] // 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
欢迎纠正错误,欢迎学习交流收藏。我是原罪,一个极客。
前言 现在不管是桌面客户端还是移动客户端,都会夹杂着一部分H5页面,这种混合式...
至上一回分解完淘宝详情页( 点击查看 )后,再写了一篇关于商城基础模板装修首页...
大家都知道网页中必须要有图片,那么具体的该如何在网页设计中加入图片呢?下面...
企业内部H5微应用开发 分为 服务端API和前端API的开发,主要涉及到进入应用免登...
qq空间有欢迎动画,想要给网页制作一个开场动画效果,该怎么制作呢?下面我们就...
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗,它还...
一、反常的SQL语句 某周四午休时分,我正在工位上小憩,睡梦中仿佛看到了自己拿...
css-vars-ponyfill 通过css变量来实现网页换肤的过程中,会出现兼容性问题。 为...
默认uni-app打包出来的H5在Android上是没法播放.m3u8直播流的,控制台或报错 Unc...
一只小奶狗会有名字、品种以及一堆可爱的特点作为其属性。如果将其建模为一个类...