在 JavaScript 中動態合併兩個對象的屬性

簡介

在 JavaScript 中，對像被定義為 key-value 的集合 對。對像也是一種非原始數據類型。

您經常需要將對象組合成一個單獨的對象，其中包含其組成部分的所有單獨屬性。此操作稱為合併 .兩種最常見的方法是：

• 使用擴展運算符（... )
• 使用Object.assign() 方法

在本教程中，我們將了解 如何在 JavaScript 中動態合併兩個對象 .

之後，我們將介紹 淺合併 之間的區別 和深度合併 ，因為它對於充分理解對象合併至關重要。

使用擴展運算符合併 JavaScript 對象

我們可以使用擴展運算符（...）將不同的對象合併為一個 ）。這也是合併兩個或多個對象最常用的方法。

這是一個不可變的 合併兩個對象的方法，即用於合併對象的起始兩個對像不會由於副作用而以任何方式更改。最後，你得到了一個新的對象，由這兩者構成，而它們仍然完好無損。

讓我們創建兩個對象並將它們合併：

const person = {
    name: "John Doe",
    age: 24
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

const employee = {...person, ...job};

console.log(employee);

這導致：

{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

注意： 如果這兩個對象之間有共同的屬性，比如他們都有一個 location ，第二個對象的屬性（job ) 將覆蓋第一個對象的屬性 (person ):

const person = {
    name: "John Doe",
    location: "Remote"
}
const job = {
    title: "Full stack developer",
    location: "Office"
}
const employee = {...person, ...job}

console.log(employee);

這導致：

{
  name: 'John Doe',
  location: 'Office',
  title: 'Full stack developer'
}

如果合併兩個以上的對象，最右邊的對象會覆蓋左邊的對象。

使用 Object.assign() 合併 JavaScript 對象

合併兩個或多個對象的另一種常見方法是使用內置的 Object.assign() 方法：

Object.assign(target, source1, source2, ...);

此方法從一個或多個 source 複製所有屬性 對象進入目標 目的。就像擴展運算符一樣，在覆蓋時，使用最右邊的值：

const person = {
    name: "John Doe", 
    age: 24,
    location: "U.S.A"
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

const employee = Object.assign(person, job);

console.log(employee);

運行上面的代碼會得到如下輸出：

{
    name: "John Doe", 
    age: 24,
    location: "Remote",
    title: "Full stack developer"
}

同樣，請記住 employee 引用的對象 是一個全新的對象，與 person 引用的對像沒有任何联系 或 job .

淺合併與深合併

在淺合併的情況下 ，如果源對象的屬性之一是另一個對象，則目標對象包含對源對像中存在的同一對象的引用。在這種情況下不會創建新對象。

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

讓我們調整之前的 person 對象，並製作 location 自己的對象：

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

const employee = {...person, ...job};

console.log(employee.location === person.location);

這導致：

true

我們可以看到對location的引用 person 中的對象 和 employee 對像是一樣的。事實上，擴展運算符（... ) 和 Object.assign() 執行淺合併。

JavaScript 沒有深度合併 支持開箱即用。但是，也有第三方模塊和庫支持它，比如 Lodash 的 _.merge。

結論

在本教程中，我們了解了如何在 JavaScript 中合併兩個對象 .我們已經探索了擴展運算符（... ) 和 Object.assign() 方法，它們都執行淺合併 將兩個或多個對象組合成一個新對象，而不影響其組成部分。