判斷兩個JS對象是否深度相等，需采用特定方法處理內部屬性和復雜類型。1. json.stringify()轉換比較適用于簡單對象，但無法處理循環引用、屬性順序敏感且對undefined、date、regexp等特殊類型處理存在缺陷；2. 遞歸深度比較可應對屬性順序不一致和特殊類型（如date、regexp），理論上支持循環引用（需額外處理），但代碼較復雜且性能較差；3. lodash的_.isequal()功能全面，能處理各種特殊情況包括循環引用，性能優化良好，但需引入庫文件。直接使用==或===僅比較對象引用，不適用內容比較。選擇方案應根據對象結構、性能需求及特殊類型處理要求綜合決定。
判斷兩個JS對象是否相等，不僅僅是簡單的==或===，深度比較需要考慮對象內部的屬性是否一致。接下來，我會介紹幾種實用的深度比較方法，幫你解決這個問題。
解決方案
-
JSON.stringify() 轉換后比較
這是最簡單粗暴的方法。先將兩個對象用JSON.stringify()轉換為字符串，然后直接比較字符串是否相等。
function isEqual(obj1, obj2) { return JSON.stringify(obj1) === JSON.stringify(obj2); } const objA = { a: 1, b: { c: 2 } }; const objB = { a: 1, b: { c: 2 } }; const objC = { a: 1, b: { c: 3 } }; console.log(isEqual(objA, objB)); // true console.log(isEqual(objA, objC)); // false
優點： 簡單易懂，代碼量少。
缺點：
- 無法處理循環引用對象。
- 屬性順序敏感，即{a: 1, b: 2}和{b: 2, a: 1}會被判定為不相等。
- 對于undefined、Date、RegExp等特殊類型的處理可能存在問題。例如，undefined屬性會丟失，Date對象會被轉換為字符串。
-
遞歸深度比較
這是一種更嚴謹的方法，可以處理屬性順序不一致和循環引用的情況。
function deepEqual(obj1, obj2) { if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { return obj1 === obj2; // 基本類型直接比較 } const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { return false; // 屬性數量不一致 } for (let key of keys1) { if (!obj2.hasOwnProperty(key) || !deepEqual(obj1[key], obj2[key])) { return false; // 屬性值不相等 } } return true; } const objA = { a: 1, b: { c: 2 } }; const objB = { b: { c: 2 }, a: 1 }; // 屬性順序不同 const objC = { a: 1, b: { c: 3 } }; console.log(deepEqual(objA, objB)); // true console.log(deepEqual(objA, objC)); // false // 處理Date類型 const date1 = new Date('2023-10-26'); const date2 = new Date('2023-10-26'); console.log(deepEqual(date1, date2)); // true // 處理RegExp類型 const reg1 = /abc/i; const reg2 = /abc/i; console.log(deepEqual(reg1, reg2)); // true // 處理循環引用(簡單示例，更復雜的循環引用需要更復雜的處理) const objD = {}; objD.a = objD; const objE = {}; objE.a = objE; //console.log(deepEqual(objD, objE)); // 棧溢出，需要特殊處理循環引用優點：
- 可以處理屬性順序不一致的情況。
- 可以處理Date和RegExp等特殊類型。
- 理論上可以處理循環引用（需要額外處理，上面的代碼會棧溢出）。
缺點：
- 代碼相對復雜。
- 性能相對較差，尤其是對于大型對象。
- 需要額外處理循環引用，否則可能導致棧溢出。
-
使用 Lodash 的 _.isEqual() 方法
Lodash 是一個流行的 JavaScript 工具庫，提供了很多實用的函數，包括深度比較對象的_.isEqual()方法。
const _ = require('lodash'); // 需要安裝lodash: npm install lodash const objA = { a: 1, b: { c: 2 } }; const objB = { b: { c: 2 }, a: 1 }; const objC = { a: 1, b: { c: 3 } }; console.log(_.isEqual(objA, objB)); // true console.log(_.isEqual(objA, objC)); // false // 循環引用也能正確處理 const objD = {}; objD.a = objD; const objE = {}; objE.a = objE; console.log(_.isEqual(objD, objE)); // true優點：
- 功能強大，考慮周全，能處理各種特殊情況，包括循環引用。
- 性能較好，經過優化。
- 代碼簡潔。
缺點：
- 需要引入 Lodash 庫，增加項目體積。
為什么直接使用 == 或 === 不行？
== 和 === 比較的是對象的引用，而不是對象的內容。即使兩個對象擁有完全相同的屬性和值，但它們在內存中的地址不同，所以 == 和 === 會返回 false。
const obj1 = { a: 1 }; const obj2 = { a: 1 }; console.log(obj1 == obj2); // false console.log(obj1 === obj2); // false
什么時候應該使用哪種方法？
- 簡單對象，不考慮順序，不包含特殊類型： JSON.stringify() 轉換后比較。
- 需要考慮屬性順序，包含特殊類型，但不確定是否有循環引用： 遞歸深度比較，并注意處理 Date 和 RegExp 類型。
- 需要考慮各種情況，包括循環引用，并且對性能有一定要求： 使用 Lodash 的 _.isEqual() 方法。
如何優化深度比較的性能？
深度比較的性能瓶頸主要在于遞歸遍歷對象的所有屬性。可以從以下幾個方面進行優化：
- 預先判斷類型： 在遞歸之前，先判斷兩個對象的類型是否相同，如果不同，直接返回 false。
- 緩存已經比較過的對象： 對于循環引用的情況，可以緩存已經比較過的對象，避免重復比較。
- 減少不必要的遞歸： 如果兩個對象的屬性數量不同，可以直接返回 false，避免繼續遞歸。
- 使用迭代代替遞歸： 將遞歸轉換為迭代，可以避免棧溢出的問題，并可能提高性能。
深度比較中常見的坑有哪些？
- 循環引用： 如果對象存在循環引用，會導致無限遞歸，最終棧溢出。
- 特殊類型： Date、RegExp、Function 等特殊類型需要特殊處理，否則可能導致錯誤的比較結果。
- 屬性順序： 不同的屬性順序可能導致比較結果不一致，需要根據實際情況進行處理。
- 原型鏈： 深度比較默認只會比較對象自身的屬性，不會比較原型鏈上的屬性。如果需要比較原型鏈上的屬性，需要特殊處理。
如何處理包含函數的對象的深度比較？
由于函數比較的特殊性（通常比較的是函數的引用，而不是函數的內部實現），深度比較包含函數的對象通常比較困難。一種常見的做法是：
- 忽略函數： 在深度比較時，直接忽略函數類型的屬性。
- 比較函數字符串： 將函數轉換為字符串，然后比較字符串是否相等（不推薦，因為函數的內部實現可能不同，但字符串相同）。
- 自定義比較規則： 根據實際情況，自定義函數的比較規則。例如，可以比較函數的名稱、參數等。
總而言之，選擇哪種方法取決于你的具體需求和場景。沒有銀彈，適合你的才是最好的。
