ES6+ Object.assign()教程

发布时间：2023-03-27 08:45:58 所属栏目：教程来源：

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

语法使用：

Object.assign(target, ...sources)
参数解释：

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

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

语法使用：

Object.assign(target, ...sources)
参数解释：

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

let target = {};
let source = {a: , b: , c: };
Object.assign(target, source);
target.d = ;
console.log(target) // {a: 1, b: 2, c: 3, d: 4}
console.log(source) // {a: 1, b: 2, c: 3}
上面的代码可以看出，Object.assign () 的主要用法就是把源对象拷贝到指定的对象上去，目标对象的更改不会影响源对象。

let target = {a: };
let source1 = {b: };
let source2 = {c: };
Object.assign(target, source1, source2);
console.log(target); // {a: 1, b: 2, c: 3}
上面的代码可以看出，Object.assign () 不会把目标对象清空，会合并后面所有的对象上的值。

let target = {a: , b: };
let source1 = {b: , c: };
let source2 = {c: };
Object.assign(target, source1, source2);
console.log(target); // {a: 1, b: 2, c: 3}
如果后面的源对象上有相同的值，后面的源对象会覆盖前面对象上的值，这一点需要注意。

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

var target = {};
var source = {a: , b: {c: , d: }};
Object.assign(target, source);
target.a = ;
target.b.c = ;
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() 来拷贝对象。

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

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

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

var target = Object.defineProperty({}, "a", {
value: ,
writable: false
});
Object.assign(target, {b: }, {a: }, {c: });
// 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。

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

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!