JS中的加号+运算符详解

转载自  JS中的加号+运算符详解

加号+运算符

在 JavaScript 中,加法的规则其实很简单,只有两种情况:

  • 把数字和数字相加
  • 把字符串和字符串相加

所有其他类型的值都会被自动转换成这两种类型的值。 为了能够弄明白这种隐式转换是如何进行的,我们首先需要搞懂一些基础知识。

让我们快速的复习一下。 在 JavaScript 中,一共有两种类型的值:

  • 原始值(primitives)
    1. undefined
    2. null
    3. boolean
    4. number
    5. string
  • 对象值(objects):除了原始值外,其他的所有值都是对象类型的值,包括数组(array)和函数(function)。

 

类型转换

加法运算符会触发三种类型转换:

  1. 转换为原始值
  2. 转换为数字
  3. 转换为字符串

通过 ToPrimitive() 将值转换为原始值

JavaScript 引擎内部的抽象操作 ToPrimitive() 有着这样的签名:

ToPrimitive(input,PreferredType?)

可选参数 PreferredType 可以是 Number 或者 String。 它只代表了一个转换的偏好,转换结果不一定必须是这个参数所指的类型(汗),但转换结果一定是一个原始值。 如果 PreferredType 被标志为 Number,则会进行下面的操作来转换input

  1. 如果 input 是个原始值,则直接返回它。
  2. 否则,如果 input 是一个对象。则调用 obj.valueOf() 方法。 如果返回值是一个原始值,则返回这个原始值。
  3. 否则,调用 obj.toString() 方法。 如果返回值是一个原始值,则返回这个原始值。
  4. 否则,抛出 TypeError 异常。

如果 PreferredType 被标志为 String,则转换操作的第二步和第三步的顺序会调换。 如果没有 PreferredType 这个参数,则 PreferredType 的值会按照这样的规则来自动设置:

  • Date 类型的对象会被设置为 String
  • 其它类型的值会被设置为 Number

通过 ToNumber() 将值转换为数字

下面的表格解释了 ToNumber() 是如何将原始值转换成数字的

参数结果
undefinedNaN
null+0
booleantrue被转换为1,false转换为+0
number无需转换
string由字符串解析为数字。例如,"324"被转换为324

如果输入的值是一个对象,则会首先会调用 ToPrimitive(obj, Number) 将该对象转换为原始值, 然后在调用 ToNumber() 将这个原始值转换为数字。

通过ToString()将值转换为字符串

下面的表格解释了 ToString() 是如何将原始值转换成字符串的

参数结果
undefined"undefined"
null"null"
boolean"true" 或者 "false"
number数字作为字符串。比如,"1.765"
string无需转换

如果输入的值是一个对象,则会首先会调用 ToPrimitive(obj, String) 将该对象转换为原始值, 然后再调用 ToString() 将这个原始值转换为字符串。

实践一下

下面的对象可以让你看到引擎内部的转换过程。

var obj = {
valueOf: function () {
console.log("valueOf");
return {}; // not a primitive
},
toString: function () {
console.log("toString");
return {}; // not a primitive
}
}

Number 作为一个函数被调用(而不是作为构造函数调用)时,会在引擎内部调用 ToNumber() 操作:

> Number(obj)
valueOf
toString
TypeError: Cannot convert object to primitive value

加法

有下面这样的一个加法操作。

value1 + value2

在计算这个表达式时,内部的操作步骤是这样的

  1. 将两个操作数转换为原始值 (以下是数学表示法的伪代码,不是可以运行的 JavaScript 代码):
     prim1 := ToPrimitive(value1)prim2 := ToPrimitive(value2)

    PreferredType 被省略,因此 Date 类型的值采用 String,其他类型的值采用 Number。

  2. 如果 prim1 或者 prim2 中的任意一个为字符串,则将另外一个也转换成字符串,然后返回两个字符串连接操作后的结果。
  3. 否则,将 prim1 和 prim2 都转换为数字类型,返回他们的和。

下面的表格就是 + 运算符对于不同类型进行运算后,得到的结果类型

----------------------------------------------------------------------------------------| undefined | boolean | number | string | function | object | null   | array
----------------------------------------------------------------------------------------
undefined  | number    | number  | number | string | string   | string | number | string
boolean    | number    | number  | number | string | string   | string | number | string
number     | number    | number  | number | string | string   | string | number | string
string     | string    | string  | string | string | string   | string | string | string
function   | string    | string  | string | string | string   | string | string | string
object     | string    | string  | string | string | string   | string | string | string
null       | number    | number  | number | string | string   | string | number | string
array      | string    | string  | string | string | string   | string | string | string
-------------------------------------------------------------------------------------------

本表适用于 Chrome 13, Firefox 6, Opera 11 and IE9。

 

加法的示例

预料到的结果

当你将两个数组相加时,结果正是我们期望的:

> [] + []
''

[] 被转换成一个原始值:首先尝试 valueOf() 方法,该方法返回数组本身(this):

> var arr = [];
> arr.valueOf() === arr
true

此时结果不是原始值,所以再调用 toString() 方法,返回一个空字符串(string 是原始值)。 因此,[] + [] 的结果实际上是两个空字符串的连接。

 

将一个数组和一个对象相加,结果依然符合我们的期望:

> [] + {}
'[object Object]'

解析:将空对象转换成字符串时,产生如下结果。

> String({})
'[object Object]'

所以最终的结果其实是把 "" 和 "[object Object]" 两个字符串连接起来。

 

更多的对象转换为原始值的例子:

> 5 + new Number(7)
12
> 6 + { valueOf: function () { return 2 } }
8
> "abc" + { toString: function () { return "def" } }
'abcdef'

 

意想不到的结果

如果 + 加法运算的第一个操作数是个空对象字面量,则会出现诡异的结果(Firefox console 中的运行结果):

> {} + {}
NaN

这个问题的原因是,JavaScript 把第一个 {} 解释成了一个空的代码块(code block)并忽略了它。 NaN 其实是表达式 +{} 计算的结果 (+ 加号以及第二个 {})。 你在这里看到的 + 加号并不是二元运算符「加法」,而是一个一元运算符,作用是将它后面的操作数转换成数字,和 Number() 函数完全一样。例如:

> +"3.65"
3.65

以下的表达式是它的等价形式:

+{}
Number({})
Number({}.toString())  // {}.valueOf() isn’t primitive
Number("[object Object]")
NaN

为什么第一个 {} 会被解析成代码块(code block)呢? 因为整个输入被解析成了一个语句:如果左大括号出现在一条语句的开头,则这个左大括号会被解析成一个代码块的开始。 所以,你也可以通过强制把输入解析成一个表达式来修复这样的计算结果: (译注:我们期待它是个表达式,结果却被解析成了语句)

> ({} + {})
'[object Object][object Object]'

一个函数或方法的参数也会被解析成一个表达式:

> console.log({} + {})
[object Object][object Object]

经过前面的讲解,对于下面这样的计算结果,你也应该不会感到吃惊了:

> {} + []
0

在解释一次,上面的输入被解析成了一个代码块后跟一个表达式 +[]。 转换的步骤是这样的:

+[]
Number([])
Number([].toString())  // [].valueOf() isn’t primitive
Number("")
0

有趣的是,Node.js 的 REPL 在解析类似的输入时,与 Firefox 和 Chrome(和Node.js 一样使用 V8 引擎) 的解析结果不同。 下面的输入会被解析成一个表达式,结果更符合我们的预料:

> {} + {}
'[object Object][object Object]'
> {} + []
'[object Object]'

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/323328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ajax做聊天交互

本想学了几天ajax就可以弄一个类似于qq的网页聊天界面,发现自己想的还是太简单了。 有两个问题无法解决: 1、即使用ajax还是无法保证数据的及时交互,没有办法无时无刻刷新页面。现学的ajax还是依赖于点击事件,才能请求后台数据。 …

ssl提高组周三备考赛【2018.10.24】

前言 快乐题警告! 成绩 RankRankRankPersonPersonPersonScoreScoreScoreAAABBBCCC1112017myself2017myself2017myself2102102101001001001001001001010102222017zyc2017zyc2017zyc1581581581001001001818184040403332017xxy2017xxy2017xxy157157157100100100272727…

spring cloud+dotnet core搭建微服务架构:Api网关(三)

前言 国庆假期,一直没有时间更新。 根据群里面的同学的提问,强烈推荐大家先熟悉下spring cloud。文章下面有纯洁大神的spring cloud系列。 上一章最后说了,因为服务是不对外暴露的,所以在外网要访问服务必须通过API网关来完成&…

java实现人脸识别源码【含测试效果图】——前期准备工作及访问提示

注意: 看完之后如有不懂,请看:关于人脸和指纹识别共同交流方案,也可以关注微信公众号:雄雄的小课堂,回复:人脸识别群获取群号,群内有直接可以运行的源码可供下载,人脸识…

JS原型链与instanceof底层原理

转载自 JS原型链与instanceof底层原理 一、问题: instanceof 可以判断一个引用是否属于某构造函数; 另外,还可以在继承关系中用来判断一个实例是否属于它的父类型。 老师说:instanceof的判断逻辑是: 从当前引用的…

P2522-[HAOI2011]Problem b【莫比乌斯反演】

正题 题目大意 求∑iab∑jcd(gcd(i,j)k)\sum_{ia}^b\sum_{jc}^d(gcd(i,j)k)ia∑b​jc∑d​(gcd(i,j)k) 解题思路 定义 f(i)∑i1n∑j1m(gcd(i,j)i)f(i)\sum_{i1}^n\sum_{j1}^m(gcd(i,j)i)f(i)i1∑n​j1∑m​(gcd(i,j)i) 然后计算f利用容斥计算答案 之后我们考虑如何计算 F(i)…

正则之注册登录

不久前写了个登录注册的网站,因为未对其做出限制,所以,随便你输入什么都可以注册成功,遂想怎么通过js规定注册的账号 我的要求是: 一:输入框不能为空,不能太长也不能太短 二: 1、注…

猿创征文|从酒店前台收银到软件研发教学主管到技术经理之路~

大家好,我是雄雄。 内容先知👉前言☝酒店收银🤨项目组长🤜OA管理系统🤜酒店管理系统👨‍🏫软件研发讲师📌学术主管👨‍💻技术经理👉项目情况&…

微服务~分布式事务里的最终一致性

本地事务ACID大家应该都知道了,统一提交,失败回滚,严格保证了同一事务内数据的一致性!而分布式事务不能实现这种ACID,它只能实现CAP原则里的某两个,CAP也是分布式事务的一个广泛被应用的原型,CA…

USACO2.4の其中3道水题【模拟,图论】

T1:P1518-两只塔姆沃斯牛 The Tamworth Two 题目大意 两个东西&#xff0c;按照一个方向前进&#xff0c;他们撞到墙壁会顺时针90&#xff0c;求他们多久后相遇。 解题思路 暴力模拟 code // luogu-judger-enable-o2 #include<cstdio> #include<iostream> using…

JavaFX仿windows文件管理器目录树

一、windows文件管理器目录树 二、代码 /** To change this license header, choose License Headers in Project Properties.* To change this template file, choose Tools | Templates* and open the template in the editor.*/ package cn.util;import imagemanagesystem.…

用正则判断字符串是否为中文的方法

检测是否为中文 var reg /^([\u4E00-\u9FA5])*$/; if (!reg.test(name)) 好看字体 <!DOCTYPE html><html><head><meta charset"UTF-8"><title></title></head><body><h1 class"vintage1">美丽的…

开源纯C#工控网关+组态软件(三)加入一个新驱动:西门子S7

一、 引子 首先感谢博客园&#xff1a;第一篇文章、第一个开源项目&#xff0c;算是旗开得胜。可以看到&#xff0c;项目大部分流量来自于博客园&#xff0c;码农乐园&#xff0c;名不虚传^^。 园友给了我很多支持&#xff0c;并提出了很好的改进意见。现加入屏幕分辨率自适应…

有没有完全自助的国产化数据库技术?

大家好&#xff0c;我是雄雄。 SPL资料 SPL官网SPL下载SPL源代码 前段时间世界部分地区不断的起冲突&#xff0c;Oracle宣布“暂停在俄罗斯的所有业务”&#xff0c;相信大家的心情绝不是隔岸观火&#xff0c;而是细思恐极。 数据库号称IT领域三大核心之一&#xff08;其他两…

我为啥不看好ServiceMesh

转载自 我为啥不看好ServiceMesh 前言 今年&#xff0c;ServiceMesh(服务网格)概念在社区里头非常火&#xff0c;有人提出2018年是ServiceMesh年&#xff0c;还有人提出ServiceMesh是下一代的微服务架构基础。作为架构师&#xff0c;如果你现在还不了解ServiceMesh的话&…

USACO2.4のP1519-穿越栅栏(Overfencing)【bfs】

正题 题目大意 一个迷宫&#xff0c;有许多出口&#xff0c;求一个点到最近的出口最远。 解题思路 直接bfs暴力搜索&#xff0c;然后保存上次的答案 code // luogu-judger-enable-o2 #include<cstdio> #include<queue> #include<cstring> #define N 210 u…

人生路漫漫,还得多输出

今天看了下别人的博客&#xff0c;感觉有点受打击&#xff0c;自己写博客花的时间还是太少&#xff0c;感觉到现在还是没有写博客的习惯。回头想想&#xff0c;其实要写的东西挺多的&#xff0c;就是不愿意写&#xff0c;莫名其妙的觉得很简单&#xff0c;写出来肯定很水&#…

ASP.NET Core 2.0 支付宝当面付之扫码支付

前言 自从微软更换了CEO以后&#xff0c;微软的战略方向有了相当大的变化&#xff0c;不再是那么封闭&#xff0c;开源了许多东西&#xff0c;拥抱开源社区&#xff0c;.NET实现跨平台&#xff0c;收购xamarin并免费提供给开发者等等。我本人是很喜欢.net的&#xff0c;并希望.…

Git使用教程:最详细、最傻瓜、最浅显、真正手把手教

转载自 Git使用教程&#xff1a;最详细、最傻瓜、最浅显、真正手把手教 一&#xff1a;Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统。 工作原理 / 流程&#xff1a; Workspace&#xff1a;工作区 Index / Stage&#xff1a;暂存区 Repository&…

【git】如何在github上推送并部署自己的项目

口令快捷 git add . git commit --m "XXXX" git remote add origin https://github.com/lifeload/new-problem.git git push -f origin master修改或删除文件 git add 对应文件/. git commit -m “xxx” git push origin master 1、上传代码 2、设置&#xff0c;建立…