您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

ES6+ Object.assign()

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

语法使用:

Object.assign(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}

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

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

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 也是对象。使用 拷贝给目标对象 target,拷贝后对 target 对象下的值进行,然后打印目标对象和源对象。从打印的结果可以看出,对 target 第一层的 a 进行时,源对象是不会改变。但是对 target 下的 b 对象下的值进行时,因为 b 也是对象,所以源对象中的值也被了。到这里可以看出, 没有对 b 进行拷贝。

如果需要深拷贝则需要,需要递归地使用去 来拷贝对象。

当合并的源对象是基本类型时,这些基本类型会作为最后对象上的值,而键则以数字递增,其中如果值是 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。

本章讲解了用于合并对象的 主要有以下几点需要注意的。


联系我
置顶