细述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 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
Jquery 扩展方法
May 06 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JS中一些高效的魔法运算符总结
May 06 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 默默经典版本
2009/08/04 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
对python requests的content和text方法的区别详解
2018/10/11 Python
Python基本socket通信控制操作示例
2019/01/30 Python
Python如何实现远程方法调用
2020/08/07 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
出差报告范文
2014/11/06 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
vue自定义右键菜单之全局实现
2022/04/09 Vue.js