简介

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

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

加法运算符

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

字符串连接:

var result = "Hello, " + "World!";

// 字符串 + 字符串 = 字符串 (连接)

// "Hello, World!"

数字算术相加:

var result = 10 + 5;

// 数字 + 数字 = 数字 (相加)

// 15

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

转换规则

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

如果至少有一个操作数是对象,会被转换成原始值(字符串,数字或布尔);

转换之后,如果至少有一个操作数是字符串类型,第二个操作数会被转换成字符串,并且会执行连接。

在其他的情况下,两个操作数都会转换成数字并执行算数加法运算。

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

对象类型转为原始类型

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

如果对象类型是Date,会调用该对象的toString();

其他情况下,如果valueOf()返回的是原始类型,会调用对象的valueOf();

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

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

资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

学习例子

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

例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, 3, 5] + 1 (使用规则1,将数组[1, 3, 5]转换成原始值: "1,3,5")

"1,3,5" + 1 (使用规则,将数字1转换为字符串 "1")

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

"1,3,51"

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

例3:数字和布尔类型

var result = 10 + true; //11

解析:

10 + true (基于规则3将布尔值true转换成数字1)

10 + 1 (将两个数字求值)

11

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

例4:数字和对象

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

解析:

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

15 + "[object Object]" (使用规则2将数字15转换成字符串 "15")

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

"15[object Object]"

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

例5: 数字和null

var result = 8 + null; // 8

解析:

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

8 + 0 (数字相加)

8

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

例6: 字符串和null

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

解析:

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

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

"queennull"

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

例7:数字和undefined

var result = 12 + undefined; // NaN

解析:

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

12 + NaN (数字相加)

NaN

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

详解Js加法运算符的更多相关文章

  1. 详解js变量、作用域及内存

    详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4       原文出处: trigkit4    基本类型值有:undefined,NUll,Boolean,Number和Strin ...

  2. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  3. 详解js和jquery里的this关键字

    详解js和jquery里的this关键字 js中的this 我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象.this对象是在运行时基于函数的执行环境绑定的,在全局环境中 ...

  4. 详解js的bind、call、apply

    详解js的bind.call.apply 说明 虽然bind.call.apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别. 由于公司后端是用的微服务架构,又没有中间层对接,导致前端 ...

  5. 详解js面向对象编程

    转自:http://segmentfault.com/a/1190000000713346 基本概念 ECMA关于对象的定义是:”无序属性的集合,其属性可以包含基本值.对象或者函数.“对象的每个属性或 ...

  6. 详解js中的闭包

    前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...

  7. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  8. 详解JS设计模式

    原文链接:www.cnblogs.com 一:理解工厂模式 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式. 简单的工厂模式可以理解为解决 ...

  9. 详解JS对象

                                          [自定义对象] 1.基本概念 ①对象是包含一系列无序属性和方法的集合: ②键值对:对象中的数据是以键值对的形式存在的,以键取 ...

随机推荐

  1. GitHub上最火的、最值得前端学习的几个数据结构与算法项目!没有之一!

    Hello,大家好,我是你们的 前端章鱼猫. 简介 前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了. 相信很多人都没有逛 GitHub 的习惯,因此总会有开 ...

  2. JZOJ2020年8月13日提高组反思

    JZOJ2020年8月13日提高组反思 T1 打了3h+,然后自己的小数据都没过 果断选择交对拍的暴力 下次还是注意时间吧 T2 一下三题都没时间打了 看了题目觉得特别烦人(有式子) 再看发现式子类似 ...

  3. this大全,还有谁??????!!!!!!!

    this在函数调用时创建,一般的对象没有this,全局window可以理解为一个函数,他有一个全局this JavaScript 语言之所以有this的设计,跟内存里面的数据结构有关系. 函数里thi ...

  4. PyQt(Python+Qt)学习随笔:QAbstractItemView的textElideMode属性

    老猿Python博文目录 老猿Python博客地址 一.概述 textElideMode属性用于控制省略文本中省略号"-"的位置,当项的内容过多视图无法显示完整时会显示部分内容,并 ...

  5. PyQt(Python+Qt)学习随笔:Action功能详解及Designer中的操作方法

    老猿Python博文目录 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没Action相关的部件,Action可以在右侧的Action Editor中编辑,如图: 如果没有出现 ...

  6. robot framework 接口自动化测试和关键字开发

    https://www.cnblogs.com/laoqing/p/10787593.html 1.实战-接口自动化测试实例 1.1 接口测试 接口测试通常是系统之间交互的接口,或者某个系统对外提供的 ...

  7. WC.exe(基于Java实现)

    一.github地址 https://github.com/Mazin-hub/MyWC.exe.git  二.PSP表格 PSP2.1 Personal Software Process Stage ...

  8. js动态加载js文件(js异步加载之性能优化篇)

    1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...

  9. AcWing 330. 估算

    大型补档计划 题目链接 若 \(K = 1\),显然,\(B[i]\) 取 \(A\) 序列的中位数时最优. 考虑扩展,我们只需要把 \(A\) 分成 \(K\) 段,每段内, \(B\) 最优的取值 ...

  10. 一起看下MySQL的崩溃恢复到底是怎么回事

    目录 回顾 思考一个问题 checkponit机制 Checkpoint的种类及触发条件 LSN 推荐阅读 本文稍微有点晦涩.但是看过之后你就能Get到MySQL的崩溃恢复到底是怎么做的! 文章公号 ...