ES6 中如何使用 Object.assign 合并对象属性-JavaScript中文网-JavaScript教程资源分享门户

在开发 Web 前端应用时，我们经常面临需要合并两个或多个对象属性的情况。在 ES6 中，我们可以使用 Object.assign 方法来实现这个功能。

Object.assign 方法概述

Object.assign 方法是 ES6 中新增的一个静态方法，用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。其语法如下：

Object.assign(target, ...sources)

其中，target 表示目标对象，sources 表示源对象，可以有多个。

需要注意的是，Object.assign 方法只会复制源对象的可枚举属性，并且不会复制其原型链上的属性。

实例演示

假设我们有以下两个对象：

// javascriptcn.com 代码示例
const obj1 = {
  a: 1,
  b: 2,
};

const obj2 = {
  c: 3,
  d: 4,
};

我们可以使用 Object.assign 方法将 obj2 的属性合并到 obj1 中：

const newObj = Object.assign(obj1, obj2);
console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }
console.log(obj1); // { a: 1, b: 2, c: 3, d: 4 }

上面的代码将 obj2 的属性合并到 obj1 中，并返回一个新的对象。同时，因为 obj1 是目标对象，所以 obj1 自身的属性也会被修改。如果我们不想修改原始对象，可以先将其复制一份再进行合并：

// javascriptcn.com 代码示例
const obj1 = {
  a: 1,
  b: 2,
};

const obj2 = {
  c: 3,
  d: 4,
};

const newObj = Object.assign({}, obj1, obj2);
console.log(newObj); // { a: 1, b: 2, c: 3, d: 4 }
console.log(obj1); // { a: 1, b: 2 }
console.log(obj2); // { c: 3, d: 4 }

上面的代码没有修改原始的 obj1 和 obj2 对象。

不可枚举属性合并

默认情况下，Object.assign 方法只会复制源对象的可枚举属性。如果源对象中有不可枚举属性，不能使用 Object.assign 方法进行复制。

不过，我们可以使用 Object.getOwnPropertyNames 方法获取对象的所有属性名称，包括不可枚举属性，然后再使用 Object.defineProperties 方法将属性一个一个复制到目标对象中。

以下是一个示例代码：

// javascriptcn.com 代码示例
const obj1 = {
  a: 1,
  b: 2,
};
const obj2 = Object.create(obj1, {
  c: {
    value: 3,
    enumerable: false,
  },
  d: {
    value: 4,
    enumerable: true,
  },
});

console.log(Object.assign({}, obj2)); // { d: 4, a: 1, b: 2 }
console.log(Object.getOwnPropertyNames(obj2)); // ["c", "d"]
console.log(Object.keys(obj2)); // ["d"]
console.log(Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj2))); // { c: { value: 3, writable: false, enumerable: false, configurable: false }, d: { value: 4, writable: false, enumerable: true, configurable: false }, a: { get: [Function: get a], set: undefined, enumerable: true, configurable: true }, b: { get: [Function: get b], set: undefined, enumerable: true, configurable: true } }

总结

Object.assign 方法可以方便地将多个对象的属性进行合并，并返回一个新的对象。需要注意的是，Object.assign 只会复制可枚举的属性。如果需要复制不可枚举属性，需要使用 Object.getOwnPropertyNames 和 Object.defineProperties 方法。

在实际开发中，我们经常需要合并多个对象的属性，使用 Object.assign 方法可以提高代码的可读性和可维护性。如果你还没有尝试过 Object.assign，不妨在下一个项目中尝试一下。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65adc835add4f0e0ff7418e8