细述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 相关文章推荐
表单提交验证类
Jul 14 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
浅谈js中的闭包
2015/03/16 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python变量和数据类型详解
2017/02/15 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python实现两张图片的像素融合
2019/02/23 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python3读写ini配置文件的示例
2020/11/06 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
工程项目建议书范文
2014/03/12 职场文书
求职教师自荐书
2014/06/19 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
财务部会计岗位职责
2015/02/03 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
导游词之南京中山陵
2019/11/27 职场文书