跳到主要内容

ES6+ Object.assign()

1. 前言​

Object 对象的更新 把一个对象复制到另一个对象，在 ES5 中需要循环对象进行拷贝

2. 方法详情​

2.1 基本语法​

语法使用：

Object.assign(target, ...sources)

参数解释：

参数描述
target需要拷贝到的目标对象
sources源对象

2.2 拷贝对象​

let target = {};
let source = {a: 1, b: 2, c: 3};
Object.assign(target, source);
target.d = 4;
console.log(target)   // {a: 1, b: 2, c: 3, d: 4}
console.log(source)   // {a: 1, b: 2, c: 3}

上面的代码可以看出，Object.assign () 的主要用法就是把源对象拷贝到指定的对象上去，目标对象的更改不会影响源对象。

2.3 合并对象​

let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target);  // {a: 1, b: 2, c: 3}

上面的代码可以看出，Object.assign () 不会把目标对象清空，会合并后面所有的对象上的值。

2.4 覆盖前面的值​

let target = {a: 1, b: 1};
let source1 = {b: 2, c: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target);  // {a: 1, b: 2, c: 3}

如果后面的源对象上有相同的值，后面的源对象会覆盖前面对象上的值，这一点需要注意。

3. 浅拷贝​

Object.assign() 的拷贝属于浅拷贝，也就是说它只拷贝对下的第一层的属性值。如果这个值是一个对象类型，那么 Object.assign() 不会对该对象进行深拷贝，也就是说，拷贝后的对象下的这个对象类型是源对象和拷贝后的对象共有的，无论谁（源对象或拷贝后对象）对这个对象下的值进行修改，另一个对象（源对象或拷贝后对象）也会共享这个改变。看下面的例子更清晰的表达：

var target = {};
var source = {a: 1, b: {c: 2, d: 3}};
Object.assign(target, source);
target.a = 5;
target.b.c = 9;
console.log(target)   // {a: 5, b: {c: 9, d: 3}}
console.log(source)   // {a: 1, b: {c: 9, d: 3}}

上面的代码中，源对象 source 是个两层的字面量对象，b 也是一个对象。使用 Object.assign() 拷贝给目标对象 target，拷贝后对 target 对象下的值进行修改，然后打印目标对象和源对象。从打印的结果可以看出，对 target 第一层的 a 进行修改时，源对象是不会改变。但是对 target 下的 b 对象下的值进行修改时，因为 b 也是一个对象，所以源对象中的值也被修改了。到这里可以看出，Object.assign() 没有对 b 进行拷贝。

如果需要深拷贝则需要，需要递归地使用去 Object.assign() 来拷贝对象。

4. 基本类型的合并​

当合并的源对象是基本类型时，这些基本类型会作为最后对象上的值，而键则以数字递增，其中如果值是 null 和 undefined 时会被忽略。看如下实例：

var s1 = "abc";
var s2 = true;
var s3 = 10;
var s4 = Symbol("foo")
var obj = Object.assign({}, s1, null, s2, undefined, s3, s4);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

5. 拷贝异常时会被打断​

在拷贝时如果发生异常，则拷贝会被终止，并报错，前面已经被拷贝的不会被影响可以继续使用，但后面没有被拷贝的则不能被使用。

var target = Object.defineProperty({}, "a", {
  value: 1,
  writable: false
});
Object.assign(target, {b: 2}, {a: 3}, {c: 4});
// Uncaught TypeError: Cannot assign to read only property 'a' of object '
console.log(target.b);  // 2
console.log(target.c);  // undefined

上面的代码中，定义了目标对象 target 上的属性 a 是只读的，也就是不能不被修改，在合并代码时，源对象上有 a，则报了 a 是对象上的只读属性不能被 assign 操作。从后面的打印结果可以看出，b 已经被拷贝到目标对象上了可以正常使用，但由于拷贝中发生异常，最后一个对象没有被拷贝，所以 c 的值是 undefined。

6. 小结​

本章讲解了用于合并对象的方法 Object.assign() 主要有以下几点需要注意的。

  • Object.assign () 属于浅拷贝；
  • 合并对象时后面的对象会覆盖前面的对象；
  • 拷贝时发生异常，前面已拷贝的不会受到影响，异常后面的对象则不会被拷贝。