细述Javascript的加法运算符的具体使用


Posted in Javascript onOctober 18, 2019

简介

JavaScript是一门了不起的语言。我喜欢它的灵活性:只需以你喜欢的方式做事:更改变量类型,动态的向对象添加方法或属性,对不同的变量类型使用运算符等等。

然而动态是要付出代价的,开发人员需要知道怎样处理对于不同操作符的类型转换:加号(+),等号(==和===),不等号(!=和!==)等等,许多运算符有自己处理类型转换的方式。

加法运算符

最常用的运算符:+,这个运算符用于接连字符串或对数字求和:

字符串连接:

var result = "Hello, " + "World!";
// 字符串 + 字符串 = 字符串 (连接)
// "Hello, World!"

数字算术相加:

var result = 10 + 5;
// 数字 + 数字 = 数字 (相加)
// 15

JavaScript允许使用对象,数组,null或undefined作为操作数。下面试着揭开转换的一般规则。

转换规则

使用下面的等式看一下在操作运算符里JavaScript是如何进行类型转换的:

  1. 如果至少有一个操作数是对象,会被转换成原始值(字符串,数字或布尔);
  2. 转换之后,如果至少有一个操作数是字符串类型,第二个操作数会被转换成字符串,并且会执行连接。
  3. 在其他的情况下,两个操作数都会转换成数字并执行算数加法运算。

如果两个操作数都是原始类型,运算符会检查是否至少有一个是字符串类型,如果是就执行连接操作。其他情况就都转换为数字并求合。

对象类型转为原始类型

对象类型向原始类型的转换

  • 如果对象类型是Date,会调用该对象的toString();
  • 其他情况下,如果valueOf()返回的是原始类型,会调用对象的valueOf();
  • 其他情况下(如果valueOf()不存在或没有返回原始类型),会调用toString()方法,大部分情况下是用的这种转换。

当数组转换为原始类型,JavaScript会使用它的join(',')方法,例如[1,5,6]就是"1,5,6"。普通JavaScript对像{}的原始类型是"[object Object]"。

学习例子

下面的例子帮助我们理解简单和复杂的转换场景。

例1:数字和字符串

var result = 1 + "5"; // "15"

解析:

  • 1+"5"(第二个操作数是字符串,基于规则2数字1变"1")
  • "1"+"5"(字符串连接)
  • "15"

第二个操作数是字符串,第一个操作数从数字转换为字符串,然后进行连接。

例2:数字和数组

var result = [1, 3, 5] + 1; //"1,3,51"

解析:

  1. [1, 3, 5] + 1 (使用规则1,将数组[1, 3, 5]转换成原始值: "1,3,5")
  2. "1,3,5" + 1 (使用规则,将数字1转换为字符串 "1")
  3. "1,3,5" + "1" (字符串连接)
  4. "1,3,51"

第1个操作数是数组,所以它被转换为原始字符串值,在下一步数字操作数转换为字符串,然后再完成两个字符串的连接。

例3:数字和布尔类型

var result = 10 + true; //11

解析:

  1. 10 + true (基于规则3将布尔值true转换成数字1)
  2. 10 + 1 (将两个数字求值)
  3. 11

因为两个操作数都不是字符串,布尔值转换成数字,然后执行算术的求和。

例4:数字和对象

var result = 15 + {}; // "15[object Object]"

解析:

  1. "15 + {}" (第二操作数是个对象,应用规则1将对象转换为原始类型字符串"[object Object]")
  2. 15 + "[object Object]" (使用规则2将数字15转换成字符串 "15")
  3. "15" + "[object Object]" (字符串连接)
  4. "15[object Object]"

第二个对象操作数转为字符串值,因为valueOf()方法返回对象本身,它不是原始值,toString() 方法就会被调用并返回字符串,第二个操作数现在是字符串了,因此数字也被转换为字符串,最后执行两个字符串的连接。

Example 5: 数字和null

var result = 8 + null; // 8

解析:

  • 8 + null (因为两个操作数都不是字符串,基于规则3将null转为数字0)
  • 8 + 0 (数字相加)
  • 8

因为操作数不是对象也不是字符串,null被转换成数字,然后计算数字的和。

Example 6: 字符串和null

var result = "queen" + null; // "queennull"

解析:

  • "queen" + null (因为第一个操作数是字符串,基于规则2将null转成字符串"null")
  • "queen" + "null" (字符串连接)
  • "queennull"

因为第一个操作数是字符串,null转成字符串,然后进行字符串连接。

Example 7:数字和undefined

var result = 12 + undefined; // NaN

解析:

  • 12 + undefined (因为操作数都不是对象或字符串,基于规则3将undefined转为数字NaN)
  • 12 + NaN (数字相加)
  • NaN

因为操作数都不是对象或字符串,undefined转为数字:NaN,对数字和NaN进行相加求值等于NaN.

可以在JsBin中看这些例子

总结

为了避免潜在的问题,不要对对象进行使用加法运算符,除非你清楚的定义了toString()或valueOf()方法。正如例子中所看到了,加法操作符有很多特定的情况。了解确切的转换场景能帮你避免未来的意外,祝coding愉快!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
js实现简易计算器功能
Oct 18 #Javascript
JavaScript实现更换背景图片
Oct 18 #Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 #jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 #Javascript
CountUp.js实现数字滚动增值效果
Oct 17 #Javascript
countUp.js实现数字动态变化效果
Oct 17 #Javascript
You might like
php的memcached客户端memcached
2011/06/14 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
pandas ix &iloc &loc的区别
2019/01/10 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python 元组和列表的区别
2020/12/30 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
《海伦?凯勒》教学反思
2014/04/17 职场文书
软件售后服务方案
2014/05/29 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
导游词之太原天龙山
2020/01/02 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
JS封装cavans多种滤镜组件
2022/02/15 Javascript