Javascript中的+运算符

guqiu 发布于2019-08-20 15:45 / 2045人阅读

摘要：在网上或面试题中经常会看到一些奇怪的语句，比如在中运算符是个重载运算符，可用来拼接字符串，以及把两个数字相加。至于是哪种情况要看运算符两边参数的类型。如何转换在规范中有详细的说明，但规范看起来是有点费劲。不过目前的知识足够回答原先的问题了。

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

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

{}+[]
// 0

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

[]+[]
// ""

在Javascript中+运算符是个重载运算符，可用来拼接字符串，以及把两个“数字”相加。至于是哪种情况要看运算符两边参数的类型。
在日常的开发中我们也不会碰到这么麻烦的事，但弄弄清楚总是好的。在规范中巴拉巴拉地说了一堆，简单来说就是：

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

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

下面是一些示例：

0 + "1"     // "01"
null + 1    // 1
true + 1    // 2
false + 1   // 0
undefined + 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();
// 1491904757087

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

这是Date类做了特殊处理， @@toPrimitive，默认情况下对 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();
}

详细的请参考规范

云服务器 GPU云服务器 java中的++运算 php中的除法运算 javascript运算符 php中的或运算符号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82470.html

JavaScript 中的强制类型转换

摘要：完整清单是中添加，此处不予介绍布尔值用来表示可能是真或假的值。结果抽象比较运算符在比较它们之前在类型之间进行自动转换。中的隐式转换称为强制类型转换，并在规范中定义。这些内置类型可用于在不同类型之间进行显式转换。翻译：疯狂的技术宅原文：https://www.valentinog.com/bl... 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 show...

endiat 2019-08-23 16:52 评论0 收藏0
学习React之前你需要知道的的JavaScript基础知识

摘要：和类在开始时遇到类组件，只是需要有关类的基础。毕竟，中的条件呈现仅再次显示大多数是而不是特定的任何内容。在我的研讨会期间，更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法，但也包括三元运算符，语言中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用...

bitkylin 2019-08-02 11:01 评论0 收藏0
深入理解javascript中的立即执行函数(function(){…})()

摘要：要理解立即执行函数，需要先理解一些函数的基本概念。函数表达式使用关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。 javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。 ( functio...

melody_lql 2019-08-20 15:28 评论0 收藏0
JavaScript 编程精解中文第三版一、值，类型和运算符

摘要：来源编程精解中文第三版翻译项目原文译者飞龙协议自豪地采用谷歌翻译部分参考了编程精解第版在机器的表面之下，程序在运转。本章将会介绍程序当中的基本元素，包括简单的值类型以及值运算符。示例中的乘法运算符优先级高于加法。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：Values, Types, and Operators 译者：飞龙协议：CC BY-NC...

wh469012917 2019-08-23 18:19 评论0 收藏0
Javascript语句 - Javascript语法基础 - Javascript核心

摘要：多数运算符都是由标点符号表示，比如和。通常会根据需要对操作数进行类型转换左值是一个古老的属于，它是指表达式只能出现在赋值运算符的左侧。也称为严格相等运算符，它用来检测两个操作数是否严格相等。运算符的检测规则是和运算符的求反。源代码： https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/...

lavnFan 2019-08-19 14:47 评论0 收藏0