魯斯前端布魯斯前端

文章中英模式

常見的前端面試題目 - 嚴格比較、鬆散比較與 Object.is() 差異解析

深入解析 JavaScript 中的 ==、===、Object.is() 比較方式與實務應用，以及淺比較與深比較的差異。

影片縮圖

懶得看文章？那就來看影片吧

== vs ===

  • == 會進行型別轉換，適合鬆散判斷。
  • === 僅在型別和值都一致時才回傳 true，為預設建議使用方式。
0 == '0'         // true
false == 0       // true
null == undefined // true
[] == false      // true

0 === '0'        // false
false === 0      // false
null === undefined // false

Object.is 精確比較

Object.is() 幾乎等同 ===，但能正確處理 NaN、+0/-0 等邊界情況。

  • Object.is(NaN, NaN) // true
  • Object.is(+0, -0) // false
  • 適用於 React.memo、useMemo、底層框架需精確判斷變動時
Object.is(NaN, NaN);    // true
Object.is(+0, -0);      // false
Object.is(42, 42);      // true

const obj1 = { a: 1 };
const obj2 = { a: 1 };
Object.is(obj1, obj2);  // false（不同參考）

Object.is 是淺比較

Object.is() 只比較第一層 reference 或值，不會深入遞迴物件內容。

const a = { x: 1 };
const b = { x: 1 };

Object.is(a, b); // false
Object.is(a, a); // true

若需深比較，請使用如 lodash 的 isEqual：

import isEqual from 'lodash.isequal';
isEqual(a, b); // true

🔥 常見面試題目

（一） == 與 === 差異為何？請舉例。

解答：== 會進行型別轉換，而 === 不會。

0 == ''            // true
false == 'false'   // false
'123' === 123      // false

（二） NaN === NaN 結果為何？

解答：NaN 在 IEEE 754 中被定義為不等於任何值（包含自己），所以 NaN === NaN 為 false，但如果需要精準比較，可以使用 Object.is(NaN, NaN) ，結果會為 true。

（三） Object.is 的使用時機？

解答：例如 React 內部為了判斷 state 或 props 是否變化，使用 Object.is() 判斷是否需要重新 render。這能避免 NaN、+0/-0 等邊界情況出錯，確保精準性與效能。

useEffect(() => {
  // 一些程式碼...
}, [.....]) // <--- 依賴內部用Object.is比較

// 內部實作簡單概覽
// 如果新值與舊值透過 Object.is 比較為相同，就不更新
if (!Object.is(prevValue, nextValue)) {
  updateState(nextValue);
}