JavaScript Object.assign()

摘要：在本教程中，您将学习如何在 ES6 中使用 JavaScript Object.assign() 方法。

以下是 Object.assign() 方法的语法

Object.assign(target, ...sources)Code language: CSS (css)

Object.assign() 将 源 对象的所有可枚举且自身拥有的 属性 复制到 目标 对象。它返回 目标 对象。

Object.assign() 在源对象上调用 getter，在目标对象上调用 setter。它只分配属性，不复制或定义新属性。

使用 JavaScript Object.assign() 克隆对象

以下示例使用 Object.assign() 方法来 克隆对象。

let widget = {
    color: 'red'
};

let clonedWidget = Object.assign({}, widget);

console.log(clonedWidget);
Code language: JavaScript (javascript)

输出

{ color: 'red' }
Code language: CSS (css)

请注意，Object.assign() 只执行浅层克隆，而不是深层克隆。

使用 JavaScript Object.assign() 合并对象

Object.assign() 可以将源对象合并到目标对象中，目标对象包含源对象的所有属性。例如

let box = {
    height: 10,
    width: 20
};

let style = {
    color: 'Red',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);
Code language: JavaScript (javascript)

输出

{
    height: 10,
    width: 20,
    color: 'Red',
    borderStyle: 'solid'
}
Code language: CSS (css)

如果源对象具有相同的属性，则后面对象的属性会覆盖前面的属性。

let box = {
    height: 10,
    width: 20,
    color: 'Red'
};

let style = {
    color: 'Blue',
    borderStyle: 'solid'
};

let styleBox = Object.assign({}, box, style);

console.log(styleBox);
Code language: JavaScript (javascript)

输出

{
    height: 10,
    width: 20,
    color: 'Blue',
    borderStyle: 'solid'
}
Code language: CSS (css)

摘要

• Object.assign() 将可枚举且自身拥有的属性从源对象分配到目标对象。
• Object.assign() 可用于 克隆对象 或 合并对象。