博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript中的+运算符
阅读量:7134 次
发布时间:2019-06-28

本文共 1703 字,大约阅读时间需要 5 分钟。

在网上或面试题中经常会看到一些“奇怪”的语句,比如

{}+{}// "[object Object][object Object]"{}+[]// 0[]+{}// "[object Object]"[]+[]// ""

在Javascript中+运算符是个重载运算符,可用来拼接字符串,以及把两个“数字”相加。至于是哪种情况要看运算符两边参数的类型。

在日常的开发中我们也不会碰到这么麻烦的事,但弄弄清楚总是好的。在 中巴拉巴拉地说了一堆,简单来说就是:

1. 对于原生类型,参数中只要有一方是字符串,则按字符串连接处理,否则按数字相加处理,不是数字的会先转成数字再相加。

原生类型有:undefined, null, boolean, number, string。

下面是一些示例:

0 + '1'     // '01'null + 1    // 1true + 1    // 2false + 1   // 0undefined + 2   // NaN,  因为undefined转成Number是NaN

2. 对于引用类型,则需要先转换成原生类型,再按以上规则相加。如何转换在规范中有的说明,但规范看起来是有点费劲。 简单来说就是:默认情况下都转化成字符串,要搞特殊的话,请重写valueOf()方法。

来个例子:

function Complex(a, b) {  this.a = a;  this.b = b;}Complex.prototype.valueOf() {  return this.a;}new Complex(2, 3) + new Complex(4, 5);// 6

但由于Js不支持真正的操作符重载,即不能相加得到自定义类型的对象, 所以以上示例在实践代码中非常少用。

不过目前的知识足够回答原先的问题了。但是慢着,{}+[] 为什么和 []+{}不一样? 这其实是个语法问题。前者相当于:

{}+[]

其实是两个句子, [] 转换成数字是 0。很容易验证 ({}+[]) === '[object Object]'

+[]  // 0

有人可能要问,那 new Date()valueOf() 不是转换成数字吗?为什么相加结果还是字符串类型呢?

new Date().valueOf();// 14919047570871 + new Date();// "1Tue Apr 11 2017 18:02:16 GMT+0800 (CST)"

这是Date类做了特殊处理, , 默认情况下对 Date 的相加以字符串方式连接,但比较时则会转换成数字。

new Date() < new Date('2018-01-01')// true, 现在是2017

将引用类型转换成原生类型在很多操作符中都有用到,比如 <, >, 所以有必要对其研究一番, 以下js代码大概描述了其行为。

/** * @param input     即要转换的对象 * @preferredType   期望转换成的类型,可以是string或number */function ToPrimitive(input, preferredType) {  if (typeof input !== 'object') {    return input;   // 本来就是原生类型  }  var hint = preferredType || 'default';  if (typeof input['@@toPrimitive'] === 'function') {   // @@toPrimitive是个内部方法,这里只是示例说明其工作原理    return input['@@toPrimitive'](input, hint);   // 这就是为什么Date能特殊处理的原因  }  if (hint === 'string') {    return input.toString();  }  return input.valueOf();}

详细的请参考

转载地址:http://fdjrl.baihongyu.com/

你可能感兴趣的文章
Android 解决ViewPager双层嵌套的滑动问题
查看>>
团队加分作业
查看>>
applicationContext.xml 中加载db.properties文件,并配置连接池,以及JDBCTemplate使用
查看>>
关于Android工程中的主要文件夹存放的文件种类
查看>>
Quartz与Spring的整合使用
查看>>
C# 0-1背包问题
查看>>
一维高斯分布与多维高斯分布
查看>>
TNS-00512: Address already in use-TNS-12542: TNS:address already in use
查看>>
法伤符i
查看>>
部署NodeJS上线步骤
查看>>
tp框架表单验证 及ajax
查看>>
[转] ADO.NET调用存储过程带输出参数或返回值
查看>>
js的重载
查看>>
oracle 多表查询
查看>>
数据结构:二级指针与Stack的数组实现
查看>>
JVM内存回收对象及引用分析
查看>>
树链剖分(+线段树)(codevs4633)
查看>>
import tensorflow 报错,CentOS 升级 glibc
查看>>
韦东山视频_第27课_dma设备驱动程序
查看>>
JAVA获取MYSQL数据库表、字段、字段类型、字段注释
查看>>