了解 JavaScript 中的 Object.assign() 方法

Object.assign() 方法是在 ES6 中引入的，它從一個或多個 source 複製所有可枚舉的自己的屬性 對像到一個目標 對象，並返回目標對象。

Object.assign() 方法調用源對像上的 getter 和目標對像上的 setter。它只分配屬性，不復製或定義新屬性。

如果源對像中的屬性具有相同的鍵，則目標對像中的屬性會被源對像中的屬性覆蓋。同樣，後面的源對象的屬性也會被前面的對象覆蓋。

Object.assign() 方法句柄 null 和 undefined 源值優雅，不會拋出任何異常。

語法

以下是 Object.assign() 的語法 看起來像：

Object.assign(target, ...sources)

• target — 應用源屬性後修改並返回的目標對象。
• sources — 包含要應用於目標對象的屬性的源對象。

克隆對象

Object.assign() 方法是我前面解釋過的在 JavaScript 中克隆對象的四種方法之一。

以下示例演示瞭如何使用 Object.assign() 克隆一個對象：

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    peach: '🍑',
    melon: '🍈',
    banana: '🍌'
};

const moreFruits = Object.assign({}, fruits);

console.log(moreFruits);

// {
//     mango: '🥭️',
//     apple: '🍎',
//     peach: '🍑',
//     melon: '🍈',
//     banana: '🍌'
// }

請記住 Object.assign() 只創建一個淺克隆 對象而不是深層克隆。

要創建深度克隆，您可以使用 JSON 方法或 Lodash 等第三方庫。

合併對象

Object.assign() 方法還可以將多個源對象合併為一個目標對象。如果您不想修改目標對象，只需傳遞一個空的（{} ) 對像作為目標如下圖：

const div = {
    width: '45px',
    height: '45px'
};

const style = {
    color: 'blue',
    colorColor: 'black'
};

const divStyles = Object.assign({}, div, style);

console.log(divStyles);

// {
//     width: '45px',
//     height: '45px',
//     color: 'blue',
//     colorColor: 'black'
// }

如果源對象具有相同的屬性 ，它們會被參數順序後面的對象的屬性覆蓋：

const div = {
    width: '45px',
    height: '45px',
    color: 'green'
};

const style = {
    color: 'blue',
    colorColor: 'black'
};

const divStyles = Object.assign({}, div, style);

console.log(divStyles);

// The `color` property is overwritten by later object
// {
//     width: '45px',
//     height: '45px',
//     color: 'blue',
//     colorColor: 'black'
// }

將數組轉換為對象

最後，您還可以使用 Object.assign() JavaScript 中將數組轉換為對象的方法。數組索引轉換為對象鍵，數組值轉換為對象值：

const foods = ['🍪', '🎂', '🍰', '🍩', '🍨'];

// convert array to an object
const obj = Object.assign({}, foods);

console.log(obj);

// {
//     '0': '🍪',
//     '1': '🎂',
//     '2': '🍰',
//     '3': '🍩',
//     '4': '🍨'
// }

瀏覽器兼容性

作為 Object.assign() 是 ES6 的一部分，它只適用於現代瀏覽器。要支持 IE 等舊版瀏覽器，您可以使用 MDN 上提供的 polyfill。

要了解有關 JavaScript 對象、原型和類的更多信息，請查看本指南。

閱讀下一篇： 理解 JavaScript 中的 Array.from() 方法