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

raoyi 發布于2019-08-26 10:27 / 2163人閱讀

摘要：在屬性用作函數值的幫助下，一個對象可被轉換為原始值。該函數被調用時，會被傳遞一個字符串參數，表示要轉換到的原始值的預期類型。參數的取值是和中的任意一個。在其他情況時，所有運算元都會轉換為原始數據類型的數字類型值，然后作數字的相加。

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云服務器云服務器云主機與與空間阿里大于與阿里與通信區別云主機與與服務器云服務器與與空間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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