了解 JS 中的 Object.assign 方法和 ES7 的 Object.getOwnPropertyDescriptors 方法-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 中经常需要操作对象，Object.assign 和 Object.getOwnPropertyDescriptors 是两个常见的对象操作方法。其中，Object.assign 可以用于合并对象，而 Object.getOwnPropertyDescriptors 可以获取属性描述符。

Object.assign 方法

Object.assign 方法可以用来将一个或多个源对象的属性拷贝到目标对象中。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);

console.log(target); // {a:1, b:2, c:3}

Object.assign 会把 source1 和 source2 的属性依次赋给 target，如果属性名重复，后面的会覆盖前面的。

如果只有一个源对象，则可以省略后面的参数。

const source = { a: 1 };
const target = Object.assign({}, source);

console.log(target); // {a: 1}

注意，Object.assign 是浅拷贝，也就是说，它只会拷贝对象的第一层属性。如果要拷贝深层属性，需要自己实现递归拷贝。

Object.getOwnPropertyDescriptors 方法

Object.getOwnPropertyDescriptors 方法可以获取对象所有自身属性的描述符。这个方法返回的是一个对象，对象的键是属性名，值是属性描述符。

// javascriptcn.com 代码示例
const obj = {
  foo: 'hello',
  get bar() {
    return this.foo;
  },
};

const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(descriptors.foo);
// {value: "hello", writable: true, enumerable: true, configurable: true}

console.log(descriptors.bar);
// {get: ƒ, set: undefined, enumerable: true, configurable: true}

属性描述符包括 value、writable、get、set、enumerable 和 configurable。其中，value 和 writable 用于表示属性的值和是否可写，get 和 set 用于表示计算属性的 getter 和 setter，enumerable 和 configurable 用于控制属性的枚举和重定义。

除了 Object.getOwnPropertyDescriptors，还有一个 Object.getOwnPropertyDescriptor 方法，它只能获取单个属性的描述符。

指导意义

Object.assign 和 Object.getOwnPropertyDescriptors 是两个常用的对象操作方法，它们能够方便地对对象进行赋值和获取属性描述符等操作。对于前端开发者来说，掌握这两个方法可以提高开发效率和代码质量。

值得注意的是，Object.assign 是浅拷贝，只能拷贝对象的第一层属性。如果需要拷贝深层属性，需要自己实现递归拷贝。

另外，Object.getOwnPropertyDescriptors 可以获取到计算属性的 getter 和 setter，这在使用 Vue、React 等框架时非常有用。如果需要复制一个计算属性，只需要获取它的 getter 和 setter，然后用 Object.defineProperty 添加到目标对象即可。

// javascriptcn.com 代码示例
const source = {
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(value) {
    const [firstName, lastName] = value.split(' ');
    this.firstName = firstName;
    this.lastName = lastName;
  }
};
const target = {};
Object.defineProperty(target, 'fullName', Object.getOwnPropertyDescriptor(source, 'fullName'));

target.fullName = '张 三';
console.log(target.firstName); // '张'
console.log(target.lastName); // '三'

总结

Object.assign 和 Object.getOwnPropertyDescriptors 是两个常见的对象操作方法，掌握这两个方法可以提高前端开发效率和代码质量。Object.assign 可以用于合并对象，Object.getOwnPropertyDescriptors 可以获取属性描述符。对于需要拷贝深层属性的情况，可以自己实现递归拷贝。对于计算属性，可以通过 Object.getOwnPropertyDescriptors 获取 getter 和 setter，然后用 Object.defineProperty 添加到目标对象。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f2c3e7d4982a6eb8b4230