JavaScript 中的 4 種相等算法

在 JavaScript 中如何判斷兩個值相等，這個問題看起來非常簡單，但並非如此，在 JavaScript 中存在 4 種不同的相等邏輯，如果你不知道他們的區別，或者認爲判斷相等非常簡單，那麼本文非常適合你閱讀。

ECMAScript 是 JavaScript 的語言規範，在 ECMAScript 規範 [1] 中存在四種相等算法，如下圖所示：

上圖中四種算法對應的中文名字如下，大部分前端應該熟悉嚴格相等和非嚴格相等，但對於同值零和同值卻不熟悉，下面我們分別介紹這四種算法。

非嚴格相等

非嚴格相等使用兩個等號，也就是我們熟悉的雙等，非嚴格相等表示語義相等，不要求類型一樣，非嚴格相等在比較前會先將比較參數類型轉換爲一致，再進行比較，代碼示例如下：

1 == 1; // true
1 == '1'; // true 類型不同，不影響比較結果

非嚴格相等有非常複雜的轉換規則，非常難以記憶，社區中有人 [2] 將上面的規則總結成了圖片，一圖勝千言，如下圖所示：

爲了方便記住非嚴格相等的的轉換邏輯，作者將非對象值，可以總結爲如下三條規則：

如果值爲對象，會使用內部的 ToPrimitive 轉換，可以通過自定義 Symbol.toPrimitive 改變返回值，需要注意的是在相等的判斷中 Symbol.toPrimitive 接受的 hint 參數都是 default。

const obj = {
  [Symbol.toPrimitive](hint) {
    console.log(hint);
    if (hint == 'number') {
      return 1;
    }
    if (hint == 'string') {
      return 'yan';
    }
    return true;
  },
};

console.log(obj == 1); // obj 返回 true
console.log(obj == '1'); // obj 返回 true
console.log(obj == true); // obj 返回 true

非嚴格相等並非帶來了很多便利，通過隱式的自動轉換，簡化了部分場景的工作，比如 Number 和 String 的自動轉換，簡化了前端從表單，url 參數中獲取值的比較問題，但自動轉換帶來的問題比便利還多。

隱式轉換的規則，大部分情況下難以駕馭，現在主流的觀點已經不建議使用，作者建議只在判斷 undefined 和 null 的場景下可以使用非嚴格相等。

嚴格相等

嚴格相等是另一種比較算法，其和非嚴格相等的區別是不會進行類型轉換，類型不一致時直接返回 false，嚴格相等對應 === 操作符，因爲使用三個等號，也被稱作三等或者全等，嚴格相等示例如下：

1 === 1; // true
1 === '1'; // false 類型不同，影響比較結果

不同類型值判斷規則如下，和前面的非嚴格相等對比，嚴格相等更符合直覺。

嚴格相等解決了非嚴格相等中隱式轉換帶來的問題，但也丟失了隱式轉換帶來的便利，對於類型可能不一致的情況下，比如從表單中獲取的值都是字符串，保險的做法是，在比較前手動類型轉換，代碼示例如下：

1 === Number('1'); // true 手動類型轉換，類型防禦

嚴格相等幾乎總是正確的，但也有例外情況，比如 NaN 和正負 0 的問題。

Number 類型有個特殊的值 NaN，用來表示計算錯誤的情概況，比較常見是非 Number 類型和 Number 類型計算時，會得到 NaN 值，代碼示例如下所示，這是從表單和接口請求獲取數據時很容易出現的問題。

const a = 0 / 0; // NaN
const b = 'a' / 1;
const c = undefined + 1; // NaN

在嚴格相等中，NaN 是不等於自己的，NaN 是 (x !== x) 成立的唯一情況，在某些場景下其實是希望能夠判斷 NaN 的，可以使用 isNaN 進行判斷，ECMAScript 2015 引入了新的 Number.isNaN，和 isNaN 的區別是不會對傳入的參數做類型轉換，建議使用語義更清晰的 Number.isNaN，但是要注意兼容性問題，判斷 NaN 代碼示例如下：

NaN === NaN; // false

isNaN(NaN); // true
Number.isNaN(NaN); // true

isNaN('aaa'); // true 自動轉換類型 'aaa'轉換爲Number爲NaN
Number.isNaN('aaa'); // false 不進行轉換，類型不爲Number，直接返回false

嚴格相等另一個例外情況是，無法區分 + 0 和 - 0，代碼示例如下，在一些數學計算場景中是要區分語義的。

+0 === -0; // true

JavaScript 中很多系統函數都使用嚴格相等，比如數組的 indexOf，lastIndexOf 和 switch-case 等，需要注意，這些對於 NaN 無法返回正確結果，代碼示例如下：

[NaN].indexOf(NaN); // -1 數組中其實存在NaN
[NaN].lastIndexOf(NaN); // -1

同值零

同值零是另一種相等算法，名字來源於規範的直譯，規範中叫做 SameValueZero，同值零和嚴格相等功能一樣，除了處理 NaN 的方式，同值零認爲 NaN 和 NaN 相等，這在判斷 NaN 是否在集合中的語義下是非常合理的。

ECMAScript 2016 引入的 includes 使用此算法，此外 Map 的鍵去重和 Set 的值去重，使用此算法，代碼示例如下：

[NaN].incdudes(NaN); // true 注意和indexOf的區別，incdudes的語義更合理

new Set([NaN, NaN]); // [NaN] set中只會有個一個NaN，如果 NaN !== NaN的話，應該是[NaN, NaN]

new Map([
  [NaN, 1],
  [NaN, 2],
]); // {NaN => 2} 如果 NaN !== NaN的話，應該是 {NaN => 1, NaN => 2}

同值

同值是最後一種相等算法，其和同值零類似，但認爲 +0 不等於 -0，ECMAScript 2015 帶來的 Object.is 使用同值算法，代碼示例如下：

Object.is(NaN, NaN); // true
Object.is(+0, -0); // false 📢 注意這裏

同值算法的使用場景是，確定兩個值是否在任何情況下功能上是相同的，比較不常用，defineProperty 使用此算法確認鍵是否存在，例如，將存在的只讀屬性值 - 0 修改爲 + 0 時會報錯，如果設置爲同樣的 - 0 將執行正常，代碼示例如下：

function test() {
  'use strict'; // 需要開啓嚴格模式
  var a = {};

  Object.defineProperty(a, 'a1', {
    value: -0,
    writable: false,
    configurable: false,
    enumerable: false,
  });

  Object.defineProperty(a, 'a1', {
    value: -0,
  }); // 正常執行

  Object.defineProperty(a, 'a1', {
    value: 0,
  }); // Uncaught TypeError: Cannot redefine property: a1
}
test();

對於數組判斷是否存在的場景，如果想區分 + 0 和 - 0，可以使用 ECMAScript 2015 引入的 find 方法，自行控制判斷邏輯，代碼示例如下：

[0].includes(-0); // 不能區分-0
[0].find((val) => Object.is(val, -0)); // 能區分+0和-0

總結

最後來對比下四種算法的區別，區別如下表所示：

dSQech

引用鏈接

[1] ECMAScript 規範: https://262.ecma-international.org/8.0/#sec-samevalue
[2] JavaScript-Equality-Table: https://dorey.github.io/JavaScript-Equality-Table/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/AtO3bXVgzMyxvarRGiF13Q

猜你喜歡