ES7 中的 Object.assign() 方法的使用及注意事项-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要处理对象的合并操作。ES6 之前，我们通常使用 Object.assign() 方法来实现。而在 ES7 中，Object.assign() 方法进行了一些升级，增加了一些新的特性。本文将介绍 ES7 中 Object.assign() 方法的使用及注意事项。

1. `Object.assign()` 方法的基本用法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它接受两个或多个参数，第一个参数是目标对象，后面的参数是源对象。例如：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = Object.assign(target, source);

console.log(target); // { a: 1, b: 4, c: 5 }
console.log(result); // { a: 1, b: 4, c: 5 }

上面的代码中，target 对象的 b 属性被源对象的 b 属性覆盖了，同时目标对象也新增了源对象的 c 属性。

需要注意的是，Object.assign() 方法是浅拷贝，即如果源对象的属性值是一个对象或数组，那么目标对象中对应的属性值只是一个引用，而不是一个副本。例如：

// javascriptcn.com 代码示例
const obj1 = { a: { b: 1 } };
const obj2 = Object.assign({}, obj1);

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

obj1.a.b = 2;

console.log(obj1); // { a: { b: 2 } }
console.log(obj2); // { a: { b: 2 } }

上面的代码中，obj2 对象中的 a 属性值只是 obj1 对象中 a 属性值的一个引用，所以当 obj1.a.b 的值被修改时，obj2.a.b 的值也会被修改。

2. `Object.assign()` 方法的新特性

在 ES7 中，Object.assign() 方法增加了一些新的特性，使得它更加方便和灵活。

2.1. 多个源对象的合并

在 ES6 中，Object.assign() 方法只能接受两个参数，即一个目标对象和一个源对象。而在 ES7 中，Object.assign() 方法可以接受多个源对象。例如：

const target = { a: 1, b: 2 };
const source1 = { b: 4, c: 5 };
const source2 = { c: 6, d: 7 };

const result = Object.assign(target, source1, source2);

console.log(target); // { a: 1, b: 4, c: 6, d: 7 }
console.log(result); // { a: 1, b: 4, c: 6, d: 7 }

上面的代码中，Object.assign() 方法接受了三个参数，其中 source1 和 source2 都是源对象，它们的属性值被合并到了 target 对象中。

2.2. 合并 Symbol 类型的属性

在 ES6 中，Object.assign() 方法不能正确地合并 Symbol 类型的属性。在 ES7 中，Object.assign() 方法可以正确地合并 Symbol 类型的属性。

const target = {};
const source = { [Symbol('foo')]: 'bar' };

Object.assign(target, source);

console.log(target); // { [Symbol(foo)]: 'bar' }

上面的代码中，source 对象的属性名是一个 Symbol 类型的值，Object.assign() 方法可以正确地将它合并到 target 对象中。

2.3. 合并 getters 和 setters

在 ES6 中，Object.assign() 方法不能正确地合并 getters 和 setters。在 ES7 中，Object.assign() 方法可以正确地合并 getters 和 setters。

// javascriptcn.com 代码示例
const target = {};
const source = {
  get foo() {
    return 'bar';
  },
  set baz(value) {
    console.log(value);
  }
};

Object.assign(target, source);

console.log(target); // { foo: 'bar', baz: [Function: set baz] }

上面的代码中，source 对象中有一个 getter 和一个 setter，Object.assign() 方法可以正确地将它们合并到 target 对象中。

3. 注意事项

在使用 Object.assign() 方法时需要注意以下几点：

Object.assign() 方法只能复制源对象的可枚举属性，即 enumerable 为 true 的属性。
Object.assign() 方法会忽略 null 和 undefined，即如果源对象的属性值是 null 或 undefined，则不会复制到目标对象中。
如果目标对象和源对象中有相同的属性名，则源对象的属性值会覆盖目标对象的属性值。
Object.assign() 方法是浅拷贝，即如果源对象的属性值是一个对象或数组，那么目标对象中对应的属性值只是一个引用，而不是一个副本。

4. 总结

Object.assign() 是一个非常实用的方法，它可以方便地将多个对象合并到一个对象中。在 ES7 中，Object.assign() 方法增加了一些新的特性，使得它更加方便和灵活。但是在使用 Object.assign() 方法时需要注意它的一些限制和注意事项。

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

ES7 中的 Object.assign() 方法的使用及注意事项

1. Object.assign() 方法的基本用法

2. Object.assign() 方法的新特性