如何比較（差異）兩個對象

JavaScript 中的物件比較

JavaScript 中的物件比較看似複雜。雖然比較數字和字串等原始值很簡單，但比較物件可能會導致意想不到的結果。讓我們探索不同的物件比較方法，並建立一個強大的解決方案來偵測物件之間的變化。

直接比較的陷阱

當開發人員第一次遇到 JavaScript 中的物件比較時，他們經常嘗試這樣的操作：

令人驚訝的是，即使兩個物件具有相同的內容，這也會傳回 false。發生這種情況是因為 JavaScript 比較的是物件引用，而不是它們的值。兩個物件都指向記憶體中的不同位置。

簡單的比較方法

1. JSON.stringify

比較物件的快速方法是使用 JSON.stringify:

雖然這適用於簡單的情況，但它有限制：

• 不處理函數
• 屬性的順序很重要
• 無法處理循環引用
• 不提供不同之處的資訊

2. 建構更好的物件差異

讓我們創建一個更複雜的解決方案，不僅可以檢測差異，還可以告訴我們發生了什麼變化：

此實作：

• 當物件相同時回傳 null
• 處理類型強制（例如，「30」與 30）
• 偵測已新增和刪除的屬性
• 提供詳細的變更資訊

實際應用

這種類型的物件比較對於以下情況特別有用：

1. 表單更改追蹤：偵測表單中哪些欄位發生了更改

1. 狀態管理：追蹤應用程式狀態的哪些部分發生了變化
2. API 更新：決定在 PATCH 請求中傳送哪些欄位
3. 審核日誌記錄：記錄對資料所做的特定變更

邊緣情況（您可能需要加倍努力）

1. 巢狀物件：深度比較與淺度比較
2. 陣列：順序敏感度與參考比較
3. 型別強制：字串與數字比較
4. 特殊值：未定義、null、NaN
5. 效能：對於大型物件來說，深度比較可能會很昂貴

PS：這是一個 Github 要點，用於比較和獲取兩個物件之間的差異的簡單函數：

以上是如何比較（差異）兩個對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！