Symbol.toPrimitive 与 [] + {} == {} + []

raoyi 发布于2019-08-26 10:27 / 2162人阅读

摘要：在属性用作函数值的帮助下，一个对象可被转换为原始值。该函数被调用时，会被传递一个字符串参数，表示要转换到的原始值的预期类型。参数的取值是和中的任意一个。在其他情况时，所有运算元都会转换为原始数据类型的数字类型值，然后作数字的相加。

Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数。

在 Symbol.toPrimitive 属性(用作函数值)的帮助下，一个对象可被转换为原始值。该函数被调用时，会被传递一个字符串参数 hint ，表示要转换到的原始值的预期类型。

hint 参数的取值是 "number"、"string" 和 "default" 中的任意一个。
转换过程如下

number: val → val.valueOf() → val.toString() → error

string: val → val.toString() → val.valueOf() → error

default: 同 number

// 一个没有提供 Symbol.toPrimitive 属性的对象，参与运算时的输出结果
var obj1 = {};
console.log(+obj1);     // NaN
console.log(`${obj1}`); // "[object Object]"
console.log(obj1 + ""); // "[object Object]"

// 接下面声明一个对象，手动赋予了 Symbol.toPrimitive 属性，再来查看输出结果
var obj2 = {
  [Symbol.toPrimitive](hint) {
    if (hint == "number") {
      return 10;
    }
    if (hint == "string") {
      return "hello";
    }
    return true;
  }
};
console.log(+obj2);     // 10      -- hint 参数值是 "number"
console.log(`${obj2}`); // "hello" -- hint 参数值是 "string"
console.log(obj2 + ""); // "true"  -- hint 参数值是 "default"

JS 中的加法运算

1、使用 ToPrimitive 运算转换左右运算元为原始数据类型（primitive）。

2、在转换后，如果其中一个运算元出现原始数据类型是“字符串”类型值时，则另一运算元强制转换为字符串，然后做字符串的连接运算。

3、在其他情况时，所有运算元都会转换为原始数据类型的“数字”类型值，然后作数字的相加。

然后我们看下 [] + {} == {} + []

1、{} + [] == 0

其实{}只是一个代码块

{} + [] =>
+ [] =>
+ ([]).valueOf() =>
+ "" =>
0

2、[] + {} == "[object Object]"

([]).valueOf() + ({}).valueOf() =>
[] + {} =>
([]).toString() + ({}).toString =>
"" + "[object Object]" =>
"[object Object]"

3、[] + {} == {} + []

解析为 "[object Object]" == "[object Object]"

4、{} + [] != [] + {} 注：[chrome 中 {} + [] == [] + {}](https://stackoverflow.com/que...

{} + [] != [] + {} =>
+ [] != [] + {} =>
0 != "[object Object]"

参考:

Symbol.toPrimitive

JS 加法运算全解析

GPU云服务器云服务器云主机与与空间阿里大于与阿里与通信区别云主机与与服务器云服务器与与空间

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

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

toString方法和valueOf方法以及Symbol.toPrimitive方法的学习

摘要：方法和方法介绍方法和我们知道在中，一切皆为对象。每个对象都有一个方法和方法，其中方法返回一个表示该对象的字符串，方法返回该对象的原始值。这两个方法都是原型链上的方法，被每个对象所继承。 valueOf()方法和toString()方法介绍 valueOf()方法和toString() 我们知道在js中，一切皆为对象。每个对象都有一个toString()方法和value方法，其中toSt...

el09xccxy 2019-08-23 11:49 评论0 收藏0
有关javascript强制转换不得不说的故事

摘要：我们首先了解一下中有关类型转换的知识。新增类型抛出异常从列表可以明显看到少了一个类型转换为的规则。这里要强调一点第二个表达式没有涉及到强制类型转换。如果文中有错误或者有某些强制转换的情形没有涉及到请及时留言告知，我会修改并补充进去。 javascript是一门非常奇特的语言，它有时候奇特的会让人怀疑人生。比如让我们看一下下面的一些奇葩例子： false == 0 ...

xcold 2019-08-21 17:31 评论0 收藏0
ECMAScript7规范中的ToPrimitive抽象操作

摘要：本文将介绍规范中的抽象操作。它们主要用于规范的说明，不需要被真正地实现。该抽象操作接受一个参数和一个可选的参数。根据规范中的加法操作，对于操作，会调用和把和转化为原始数据类型。本文将介绍ECMAScript7规范中的ToPrimitive抽象操作。预备知识 ECMAScript数据类型 ECMAScript数据类型细分为两大类数据类型，一种是语言类型，一种是规范类型：语言类型...

张汉庆 2019-08-23 11:51 评论0 收藏0
JavaScript 运算符规则与隐式类型转换详解

摘要：我们再来回顾下文首提出的这个比较运算，首先为对象，则调用函数将其转化为字符串对于右侧的，首先会进行显式类型转换，将其转化为。 JavaScript 运算符规则与隐式类型转换详解从属于笔者的现代 JavaScript 开发：语法基础与工程实践系列文章，主要探讨 JavaScript 中令人迷惑的加减乘除与比较等常见运算中的规则与隐式类型转换；本文中涉及的参考资料全部声明在了JavaSc...

snifes 2019-08-21 16:17 评论0 收藏0
JavaScript 运算符规则与隐式类型转换详解

摘要：我们再来回顾下文首提出的这个比较运算，首先为对象，则调用函数将其转化为字符串对于右侧的，首先会进行显式类型转换，将其转化为。 JavaScript 运算符规则与隐式类型转换详解从属于笔者的现代 JavaScript 开发：语法基础与工程实践系列文章，主要探讨 JavaScript 中令人迷惑的加减乘除与比较等常见运算中的规则与隐式类型转换；本文中涉及的参考资料全部声明在了JavaSc...

Kyxy 2019-08-21 12:05 评论0 收藏0