如何在JavaScript中合併對象

核心要點

• JavaScript 中常用的對象合併方法包括展開運算符 (...) 和 Object.assign() 方法。展開運算符更現代、簡潔，而 Object.assign() 兼容性更好，適用於較舊的環境。
• 展開運算符和 Object.assign() 在合併對象時都執行淺拷貝，這意味著嵌套對象仍然是原始對象的引用。修改合併對像中的嵌套對象可能會影響原始對象，從而導致潛在的意外副作用。
• 對於深度合併（正確合併嵌套對象），可以使用自定義函數或 Lodash 等庫。文中提供了一個自定義函數 deepMergeObjects 的示例，該函數在使用 JSON.parse(JSON.stringify()) 技術合併對象之前，會創建對象的深度副本。

開發人員經常需要合併或複制對象來完成諸如組合數據或創建新實例之類的任務。展開運算符 (...)（用於合併多個對象的屬性）和 Object.assign() 方法（用於將一個對象的屬性複製到另一個對象）等技術是完成這些任務的重要工具。但是，了解何時以及如何使用它們對於有效操作對象至關重要。在本文中，我將介紹這些方法的一些實際應用、它們的優缺點以及深度複製後再合併嵌套對象的理念。

目錄

• 對象合併方法
  • 1. 展開運算符 (...)
  • 2. Object.assign() 方法
• 陷阱與註意事項
• 選擇哪種方法
• 深度合併：深度複製和合併對象
  • 自定義深度合併函數
• 結論

對象合併方法

1. 展開運算符 (...)

展開運算符 (...) 是在 JavaScript 中合併對象的常用方法。其形式為 { ...object1, ...object2 }。當源對像中存在鍵相同的屬性時，展開運算符會用最新的源對象的數值覆蓋目標對像中的數值。

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

2. Object.assign() 方法

Object.assign() 是 JavaScript 中用於合併對象的另一種方法。其語法為 Object.assign(target, source1, source2, ...)，其中將源對象合併到目標對像中。當源對像中存在鍵相同的屬性時，Object.assign() 會用最新的源對象的數值覆蓋目標對像中的數值。

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

陷阱與註意事項

以下是 JavaScript 中使用展開運算符和 Object.assign() 方法合併對象時可能遇到的陷阱和問題：

1. 淺拷貝

展開運算符和 Object.assign() 在合併對象時都執行淺拷貝。這意味著嵌套對象仍然是原始對象的引用。修改合併對像中的嵌套對象可能會影響原始對象，這可能會導致意外的副作用。

請參閱下面的深度合併。

2. 覆蓋屬性

當合併具有相同鍵的屬性的對象時，展開運算符和 Object.assign() 會用來自最新源對象的數值覆蓋結果對像中的數值。如果處理不當，此行為可能會導致數據丟失。

3. 兼容性問題

展開運算符是 ECMAScript 2015 (ES6) 的一部分，在較舊的 JavaScript 環境或瀏覽器（例如 Internet Explorer）中不受支持。如果您的代碼需要在較舊的環境中運行，這可能會導致兼容性問題。在這種情況下，最好使用 Object.assign()，因為它具有更廣泛的支持。

4. 不可枚舉屬性

展開運算符和 Object.assign() 只會將可枚舉屬性從源對象複製到目標對象。在合併過程中不會復制不可枚舉屬性，這可能會導致數據丟失或意外行為。

5. 性能問題

如果您需要合併大型對像或頻繁執行合併操作，則使用 Object.assign() 或展開運算符可能會導致性能問題，因為在合併過程中會創建新對象。

6. 原型屬性

Object.assign() 會將屬性從源對象的原型複製到目標對象，如果源對象的原型具有與目標對象的屬性衝突的屬性，這可能會導致意外行為。另一方面，展開運算符不會復制原型屬性。

在 JavaScript 中使用展開運算符或 Object.assign() 合併對象時，務必注意這些陷阱和問題。在特定情況下，您可能需要採用其他方法，例如深度克隆或深度合併函數，以克服這些限制。

選擇哪種方法

Object.assign() 和展開運算符都能有效地合併對象。展開運算符更簡潔、更現代，而 Object.assign() 則與較舊的 JavaScript 環境具有更好的兼容性。

要決定使用哪種方法，請考慮：

1. 如果您的環境支持展開運算符（例如最新的 ECMAScript 版本），請使用它，因為它語法簡潔。
2. 如果與較舊的 JavaScript 環境的兼容性至關重要，請選擇 Object.assign()。
3. 如果您需要復制嵌套對象（內部嵌套對象的嵌套對象），請閱讀深度複製對象。

深度合併：深度複製和合併對象

展開運算符和 Object.assign() 都創建被複製對象的淺拷貝。本質上，這意味著新對象將引用與原始對象相同的嵌套對象（例如數組和函數），而不是它們的副本。

在合併對象之前，了解並避免這一點至關重要。

下面的示例顯示瞭如何編輯複製對象的嵌套對象會影響原始對象：

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

這段代碼的輸出表明，通過在 shallowCopyPlanet 中編輯原始對象 planet 的 info.moons 屬性已被更改（您可能不希望這樣）。

自定義深度合併函數

這是一個函數，它在合併之前會深度複製多個對象，並返回單個對象。在代碼中，deepMergeObjects 函數接受任意數量的輸入對象，使用 JSON.parse(JSON.stringify()) 技術創建它們的深度副本，然後使用 reduce() 方法中的展開運算符合併它們。合併後的對象將包含來自輸入對象的屬性的深度副本。

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = Object.assign({}, defaults, userSettings);
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

結論

感謝您的閱讀！我希望本文能幫助您深入了解在 JavaScript 中合併對象，而不僅僅是淺顯的介紹。能夠合併對象應該能很好地與您的 JavaScript 技能相結合，並擴展您的編碼能力。如有任何問題或意見，請加入 SitePoint 社區論壇。

關於在 JavaScript 中合併對象的常見問題解答

在 JavaScript 中合併對象的理念是什麼？

在 JavaScript 中合併對像是指將兩個或多個對象合併成單個對象的過程。這通常是為了將多個對象的屬性和方法合併到一個對像中，從而更方便地管理和操作數據。合併後的對象將包含原始對象的所有屬性和方法。如果存在重複的屬性，則最後一個對象的數值將覆蓋之前的數值。

如何使用展開運算符在 JavaScript 中合併對象？

JavaScript 中的展開運算符 (...) 是一種現代且高效的合併對象的方法。它允許展開諸如數組表達式或字符串之類的可迭代對象，以在預期為零個或多個參數或元素的地方使用。以下是如何使用它的示例：

<code class="language-javascript">const planet = {
  name: 'Earth',
  emoji: '?',
  info: {
    type: 'terrestrial',
    moons: 1
  }
};

// 使用展开运算符进行浅拷贝
const shallowCopyPlanet = { ...planet };

// 修改浅拷贝中的嵌套对象
shallowCopyPlanet.info.moons = 2;

console.log('原始行星：', planet.info.moons);
// 原始行星：2
console.log('行星的浅拷贝：', shallowCopyPlanet.info.moons);
// 行星的浅拷贝：2</code>

Object.assign() 方法在合併對像中的作用是什麼？

Object.assign() 方法用於將一個或多個源對象的所有可枚舉自身屬性的數值複製到目標對象。它將返回目標對象。它是一種非常有用的合併對象的方法，因為它允許您將多個源對象合併到單個目標對像中。但是，需要注意的是，如果在多個對像中都找到了相同的屬性，則具有該屬性的最後一個對象的數值將覆蓋之前的數值。

我可以在 JavaScript 中合併嵌套對象嗎？

是的，您可以在 JavaScript 中合併嵌套對象。但是，此過程稍微複雜一些，因為您需要確保嵌套對像也正確合併，而不僅僅是頂級屬性。這通常稱為深度合併。 Object.assign() 和展開運算符默認情況下都不會執行深度合併。為此，您需要實現自定義函數或使用 Lodash 等庫。

合併對象時，重複屬性會發生什麼？

在 JavaScript 中合併對象時，如果存在重複屬性，則最後一個對象的數值將覆蓋之前的數值。這是因為當合併對象時，它會遍歷源對象的屬性並將它們分配給目標對象。如果目標對像上已經存在屬性，則其數值將被新數值替換。

是否可以像合併對像一樣合併 JavaScript 中的數組？

是的，可以使用與對像類似的方法在 JavaScript 中合併數組。展開運算符是合併數組的常用方法。以下是一個示例：

<code class="language-javascript">const defaults = { color: 'red', size: 'medium' };
const userSettings = { color: 'blue' };

const combinedSettings = { ...defaults, ...userSettings };
console.log(combinedSettings);
// 输出：{ color: 'blue', size: 'medium' }</code>

如何在不修改原始對象的情況下合併對象？

展開運算符和 Object.assign() 方法在合併時都會創建一個新對象，從而使原始對象保持不變。這是這些方法的一個關鍵特性，因為它促進了不變性，這是函數式編程中的一個核心概念，其中數據永遠不會更改。

我可以在 JavaScript 中合併具有不同數據類型對象嗎？

是的，您可以在 JavaScript 中合併具有不同數據類型對象。合併後的對象將包含原始對象的所有屬性和方法，而不管其數據類型如何。但是，如果存在具有不同數據類型的重複屬性，則最後一個對象的數值將覆蓋之前的數值。

合併 JavaScript 對象的性能影響是什麼？

合併 JavaScript 對象可能會對性能產生影響，尤其是在處理大型對象時。展開運算符和 Object.assign() 方法的時間複雜度均為 O(n)，其中 n 是源對像中屬性的總數。因此，在決定合併對象時，務必考慮對象的大小。

有哪些庫可以幫助在 JavaScript 中合併對象？

是的，有一些庫可以幫助在 JavaScript 中合併對象。 Lodash 是一個流行的庫，它提供了一系列用於操作對象和數組的實用程序函數，包括用於深度合併對象的合併函數。另一個庫是 jQuery，它提供了 $.extend() 方法來合併對象。

以上是如何在JavaScript中合併對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！