【前端面试】（二）JavaScript加法运算

视频链接：JavaScript加法运算 - Web前端工程师面试题讲解

数值 + 数值

首先看菜鸟教程有关于数值对象的教程

JavaScript Number 对象

可以知道Infinity ， -Infinity 和 NaN 都是 JavaScript 保留字，不能用作标识符，对大小写敏感，此外NaN也是特殊的非数值。

//NaN+数值仍是NaN
console.log(88+ NaN);
//无法确定哪个无穷
console.log(Infinity+ -Infinity);
console.log(Infinity+ Infinity);
console.log(-Infinity+ -Infinity);

得出的结果如下：

---

注意：浏览器输入 +0 或 0 在浏览器console.log都会输出 0



在开发者F12模式下的控制台，确实输出0。

那么下面

console.log(+0 + +0);
console.log(-0 + -0);
//正0 加个 负0 还是正0，挺奇怪的
console.log(+0 + -0);

最终效果如下，都是默认+0没有+号：

---

字符串 + 字符串

就是两个字符串拼接合并

console.log("Hello " + "World");

最终效果如下：

---

字符串 + 数值

最终都会输出字符串，所以加下来要注意优先级和字符串的位置对该加法运算的影响

console.log("10" + 10.10);
console.log(typeof ("10" + 10.10));

它的变化是由于"10"在前，那么会令10.10变为"10.1",最终像字符串+字符串那样变为了"1010.1"。

那么后面例子类似的：

console.log("1" + 2 + 3 + 4);
console.log(1 + 2 + 3 + "4");
console.log(1 + ( 2 + "3" ) + 4);

效果如下：

它们的实现逻辑如下：

---

字符串 + ？

最终还是类似上面的把未知类型的数值变为字符串，最后合并成一个新的字符串

console.log("1" + NaN);
console.log("1" + Infinity);
console.log("1" + -Infinity);
console.log("1" + true);
console.log("1" + false);
console.log("1" + undefined);
console.log("1" + null);

结果如下：

---

如果是数组的话则是

console.log("1" + []);
console.log("1" + [123] );

运算逻辑如下：

视频中有个比较的特别的例子，如果数组只有三个逗号去相加的话，默认去掉数组中最后一个逗号不识别。

console.log("1" + [,,,] );

那么得到的结果为：

接下来的例子也没什么特别的了，它的相加步骤也很好猜：

console.log("1" + [123,456,789,'aaa']);

---

字符串 + 函数/对象

console.log("1" + function uu(){var a = 1;});
console.log("1" + {} );
console.log("1" + {a:1} );

可以看到对象经由console.log 后变为 [object,Object]，其中第一个o是小写的

在视频中老师也提道只有花括号去转toString()函数，它是不能识别的，认为它就是个空代码块。

无论是使用document.write还是console.log()都是会最终返回[object Object]，而当我像蛋老师那样在开发者模式下的控制台输入同样的内容才会报错。

console.log({}.toString());

未使用控制台输入的结果

蛋老师输入控制台的结果

---

数组 + 布尔类型

console.log(11 + true);
console.log(11 + false);

true变为1，而false变为0。

---

数组 + 数组

数组会变为字符串类型，而最后就变为了 字符串 + 数组 的情况了

console.log([] + 1);
console.log([123] + 1);
console.log([123,456,789] + 1);
console.log([,2,,] + 1);

---

数组 + 函数/对象

还是同样的，数组变为字符串，函数也因此变为字符串，对象变为[object Object]

console.log([12,12] + function(){var a =0;});
console.log([] + function(){var a =0;});
console.log([12,12] + {});
console.log([12,12] + {a:1});

---

经典面试题(从左往右运算)

console.log([] + {});
console.log({} + []);
console.log(({}) + []);
console.log((function a() {var aa = 0;}) + {});

注意如果是在浏览器的控制台输入{}+[]的话

console.log([1,2]+function a(){var aa = 0});