JavaScript >> Javascript 文檔 >  >> Tags >> object

如何在 JavaScript 中使用 Object.is() 方法

Object.is() 方法是在 ES6(ECMAScript 2015)中引入的,可用於確定兩個 JavaScript 對像或原始值是否相等。

Object.is() 與 JavaScript 嚴格比較運算符 === 非常相似 ,但我們將在本文中介紹一些細微的差異。

您可以使用 Object.is() 用數字、字符串,甚至對象來測試相等性,如下所示:

Object.is('Mango', 'Mango');        // true
Object.is('Mango', 'Orange');       // false

Object.is(window, window);          // true
Object.is(null, null);              // true
Object.is([], []);                  // false

const animals = { penguin: '🐧' };
const fruits = { orange: '🍊' };

Object.is(animals, animals);        // true
Object.is(animals, fruits);         // false

// Special Cases
Object.is(-0, -0);                  // true
Object.is(0, -0);                   // false
Object.is(NaN, 0 / 0);              // true

Object.is() 方法總是返回 false 除非滿足以下條件之一:

  • 兩個值都是 undefined
  • 兩個值都是 null
  • 兩個值都是 truefalse
  • 兩個值都是相同長度的字符串,相同的字符順序相同
  • 兩個值都是同一個對象(指同一個對象)
  • 兩個值都是數字(並且都是 +0 , 都是 -0 ,或兩者都有 NaN )

JavaScript 處理 +0-0 不同,所以在使用 Object.is() 比較它們時要小心 .

Object.is()=== 運算符

雖然 Object.is() 和嚴格比較運算符(=== ) 幾乎可以互換使用,主要有兩個區別。

第一個區別是 === 運算符處理數值 -0+0 相等,而 Object.is() 並非如此 :

-0 === +0;              // true
Object.is(-0, +0);      // false

第二個區別是 === 運算符,不同於 Object.is() , 處理 Number.NaN 不等於 NaN

Number.NaN === NaN;             // false
Object.is(Number.NaN, NaN);     // true

瀏覽器兼容性

Object.is() 方法僅適用於現代瀏覽器。如果您需要支持 Internet Explorer 等舊瀏覽器,請使用 MDN 提供的以下 polyfill:

if (!Object.is) {
  Object.defineProperty(Object, "is", {
    value: function (x, y) {
      // SameValue algorithm
      if (x === y) { // Steps 1-5, 7-10
        // Steps 6.b-6.e: +0 != -0
        return x !== 0 || 1 / x === 1 / y;
      } else {
        // Step 6.a: NaN == NaN
        return x !== x && y !== y;
      }
    }
  });
}

Tutorial JavaScript 教程
  1. 前端工程師可讀代碼#1 用變量名傳達信息

  2. 我正在尋找 React 開發人員

  3. 為什麼在換行後拆分不使用 JavaScript 返回單個數組?

  4. Redux 基礎知識

  5. 編寫函數式編程風格的 map 函數

  6. JS 抽認卡

  7. 如何在 Tailwindcss 和 react.js 中使用 dark 實用程序

  1. 立即在 Twitch 上直播! (更新:全部完成!)

  2. 如何在 Node.js 中格式化 Mongoose 的日期?

  3. 如何使用 Express JS 設置 Typescript

  4. 通過 NEVER USING ELSE 語句編寫更好的代碼並成為更好的程序員

  5. 按值傳遞與按引用傳遞

  6. 簡單的 CSS 動畫示例可幫助您弄清楚

  7. 教程:使用 can-migrate 自動升級到 CanJS 3

  1. 介紹金魚:極簡主義主題

  2. 構建一個 React 側邊欄導航組件

  3. 沒有 Webpack 的未來

  4. 如何在 React 中使用組件級取消(Promises、RxJS 或 Redux 查詢)