视频链接: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);

得出的结果如下:


注意:浏览器输入 +00 在浏览器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});

最新文章

  1. Project Euler欧拉计划
  2. SQL Server 解读【已分区索引的特殊指导原则】(3) - 非聚集索引分区
  3. Cesium原理篇:2最长的一帧之网格划分
  4. XML.03-DOM和SAX解析
  5. td内容过长,省略号表示
  6. CSS3最简洁的轮播图
  7. IE6多出一只猪的经典bug
  8. iOS应用启动时间
  9. javascript语法之流程控制语句
  10. 程序员修神之路--🤠分布式高并发下Actor模型如此优秀🤠
  11. Python-接口自动化(九)
  12. requests+正则爬取猫眼电影前100
  13. MYSQL基本操作(上)
  14. Concurrent usage detected
  15. 158A Next Round
  16. Xilinx 7 series FPGA multiboot技术的使用
  17. Java - 集成开发环境Eclipse的使用方法和技巧
  18. STM32F4 How do you generate complementary PWM Outputs?
  19. android学习-异步消息处理机制
  20. SVG 动画(animate、animateTransform、animateMotion)

热门文章

  1. Fauce:Fast and Accurate Deep Ensembles with Uncertainty for Cardinality Estimation 论文解读(VLDB 2021)
  2. XCTF练习题---MISC---base÷64
  3. junethack使用指南
  4. Springboot 整合 MyBatisPlus[详细过程]
  5. 修复Arch Linux和Manjaro Linux无法显示emoji的问题
  6. Swift字符串操作-持续更新-2022
  7. Docker系列教程03-Docker私有仓库搭建(registry)
  8. kubernetes源码学习-环境配置篇
  9. 实践GoF的23种设计模式:建造者模式
  10. 超全面!1.5w字总结50个Java经典基础面试题(已根据知识点分类)