资讯专栏INFORMATION COLUMN

温故js系列(17)-详解加法运算符

gxyz / 2378人阅读

摘要:数字和解释因为没有任何一个操作数是字符串,将转换为一个数字做数字加法运算因为没有操作数是对象或字符串,将转换为。结论以避免潜在的问题,不使用加法运算符处理对象,除非你清楚地使用或方法。

前端学习:教程&模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试资源汇总

JavaScript一路走来,备受争议,与其说它备受争议,不如说它不够完美。不够完美?那完美了还得了,它的强大你还没体会到吗?它是如此的灵活,当然随之而来的便是开发的代价,它不像强类型语言那样规规矩矩,今天就说说这个加法运算符。当然,这个不是之前的温故,不是我说,随意翻译,顺便分享,后附原文。

这里不讲+转换类型,详见第四章运算符详解

本职工作:加法运算符
var result = 10 + 5;  
// number + number = number (addition)
// 15

关于运算符的学习可参考:运算符详解

胜任工作:连接字符串
var result = "Hello, " + "World!";  
// string + string = string (concatenation)
// "Hello, World!"

JavaScript允许我们在object、array、null or undefined上使用操作符。那我们来看看使用的规则和细节。

转换规则
operand + operand = result 

如果操作数中有一个是对象,它会被转换为原始值(string、number or boolean)

如果操作数中有一个是字符串,第二个操作数将转换成字符串,并且连接在一起转换为字符串

在其它情况之下,两个操作数转换为数字并执行加法运算

如果两个运算数是原始类型,则检查如果至少一个操作数是字符串的话,就把它们当字符串连接。在其他情况下,它会把他们都当数字,然后转化为数字相加的总和。

对象转换规则

如果对象类型是一个Date,使用toString()方法

在其它情况下使用valueOf()方法,返回一个原始值

如果valueOf()方法不能返回一个原始值,使用toString()方法。大多情况都会发生这种情况

当一个数组被转换为原始值,JavaScript会使用join(",")方法,例如[1,5,6]的原始值是"1,5,6"。一个普通的JavaScript对象{}的原始值是"[object Object]"

Learning from examples

阅读实例请参看上面的转换规则

Example 1: 数字和字符串
var result = 1 + "5"; // "15"

解释:

1 + "5" (第二个操作数是一个字符串,那么数字1将会变成字符串"1")

"1" + "5" (连接字符串)

"15"

第二个操作数是一个字符串,第一个操作数把number转换成string类型,然后将它们连接在一起。

Example 2:数字和数组
var result = [1, 3, 5] + 1; //"1,3,51"

解释:

[1,3,5] + 1 (数组[1,3,5]转换为原始值为"1,3,5")

"1,3,5" + 1 (数字1转换成字符串"1")

"1,3,5" + "1" (连接字符串)

"1,3,51"

第一个操作数是数组,转换为原始值字符串,第二个操作数是数字,转换为字符串,然后两个字符串连接在一起。

Example 3:数字和布尔值
var result = 10 + true; //11 

解释:

10 + true (布尔值true将转换为数字1)

10 + 1 (数字做加法运算)

11

因为两个操作数都不是字符串,布尔值将转换为数字符,然后作数字加法运算。

Example 4: 数字和对象
var result = 15 + {}; // "15[object Object]"

解释:

15 + {} (第二个操作数是一个对象,对象转换为字符串"[object Object]")

15 + "[object Object]" (数字15转换为字符串"15")

"15" + "[object Object]" (连接字符串)

"15[object Object]"

第二个操作数是一个对象,转换为原始值字符串。因为valueOf()方法返回的是对象本身,而不是一个原始值,所以再使用toString()方法,返回一个字符串。

第二个操作数转换之后是一个字符串,故数字也将转换为一个字符串,再把字符串连接在一起。

Example 5:数字和null
var result = 8 + null; // 8

解释:

8 + null(因为操作数没有字符串,null将转换为数字0)

8 + 0 (两个数字做加法运算)

8

如果操作数不是对象或字符串时,null会转换为数字,然后做数字加法运算。

Example 6:字符串和null
var result = "queen" + null; // "queennull"

解释:

"queen" + null (因为第一个操作数是一个字符串,null将转换为一个字符串"null")

"queen" + "null" (连接字符串)

"queennull"

因为第一个操作数是一个字符串,所以null将转换为一个字符串"null",然后两个把字符串连接在一起。

Example 7: 数字和undefined
var result = 12 + undefined; // NaN

解释:

12 + undefined (因为没有任何一个操作数是字符串,undefined将转换为一个数字NaN)

12 + NaN (做数字加法运算)

NaN

因为没有操作数是对象或字符串,undefined将转换为NaN。两个数字做加法运算,之所以要做加法,是因为typeof(NaN) == "number",又因为任何一个数字和NaN做加法运算,所以等于NaN。

结论

以避免潜在的问题,不使用加法运算符处理对象,除非你清楚地使用toString()valueOf()方法。

如在实例中看到的,开发中要明确场景的转换规则,以防JavaScript给你带来的惊喜哦。

Have a good coding day!

See the examples in JS Bin

英文原文:JavaScript addition operator in details

MORE延伸几个表达式
[] + []; //""
[] + {}; //"[object Object]"
{} + {}; //NaN  firfox下结果
{} + {}; //"[object Object][object Object]" chrome下结果
({} + {}); //"[object Object][object Object]"
{} + []; //0

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92353.html

相关文章

  • 温故js系列(4)-算符详解

    摘要:一元运算符一元运算符只能操作一个值。逻辑非逻辑非参考数据判断逻辑非运算符可以用于任何值。无论这个值是什么数据类型,这个运算符都会返回一个布尔值。 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:运算符 JavaScript-运算符 JavaScript 有一系列操作数据值的运算符,运算符按照特定运算规则对...

    王军 评论0 收藏0
  • 温故js系列(8)-详解代码中的流程控制

    摘要:甚至包括原型链上的所有可枚举的属性显然,我们习惯的数组遍历的结果是只有这样的结果的。当代码运行到语句时,执行上下文的作用域链临时被改变了。 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:流程控制 JavaScript-流程控制 JavaScript是单线程的,一个语句一个语句的执行。语句是执行过程中的流...

    blastz 评论0 收藏0
  • 温故js系列(13.2)-有意思的30题_解析

    摘要:茶余饭后,来杯咖啡对数组的每个元素调用定义的回调函数并返回包含结果的数组。因此,题目等同于最终返回。但是的次方计算出的结果由于精度问题使得失效。,返回,执行会强制将转换为,,最终返回。我们可能理解为,该函数存储的是嵌套函数创建时变量的值。 前端学习:教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:30题_解析 Ja...

    AZmake 评论0 收藏0
  • 温故js系列(16)-数组&数组方法使用详解

    摘要:创建数组数组字面量数组构造函数参数为数组建议使用数组字面量方式,性能好,代码少,简洁,毕竟代码少。数组判断方法用来判断某个值是否为。的这是最简洁最直接的遍历数组元素的语法。把数组转换为本地数组,并返回结果。 前端学习:前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总 欢迎提issues斧正:数组&数组方法使用详解 Array对象 之前一...

    morgan 评论0 收藏0
  • 温故js系列(18)-对象&对象使用

    摘要:对象创建字面量方式构造函数方式也可以这样不过这样的话,为何不选择字面量方式字面量方式和方式的写法是等价的,返回的结果是同种类的对象。构造函数产生实例时,实例通过其对应原型对象的访问对应的构造函数对象。 前端学习:教程&模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试资源汇总 欢迎提issues斧正:对象&对象使用 Object对象 在 JavaScript 中,对...

    keke 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<