主要的用途是用來(lái)合并多個(gè)JavaScript的對(duì)象盟戏。
Object.assign()接口可以接收多個(gè)參數(shù),第一個(gè)參數(shù)是目標(biāo)對(duì)象,后面的都是源對(duì)象口蝠,assign方法將多個(gè)原對(duì)象的屬性和方法都合并到了目標(biāo)對(duì)象上面,如果在這個(gè)過(guò)程中出現(xiàn)同名的屬性(方法)津坑,后合并的屬性(方法)會(huì)覆蓋之前的同名屬性(方法)妙蔗。
語(yǔ)法: Object.assign(target, …sources) target: 目標(biāo)對(duì)象,sources: 源對(duì)象
用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象疆瑰。
一.淺拷貝:復(fù)制的只是引用眉反,原對(duì)象屬性的改變會(huì)引起拷貝對(duì)象對(duì)應(yīng)引用屬性的變化。
使用Object.assign()(只能拷貝第一層)
let a = {
name:'tom',
age:20,
friends:{
student:['jack']
}
}
let b = Object.assign({},a);
a.friends.student = ['tony'];
console.log(a);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }
console.log(b);// { name: 'tom', age: 20, friends: { student: [ 'tony' ] } }
二.深拷貝:開(kāi)辟新的內(nèi)存空間穆役,原對(duì)象與拷貝對(duì)象之間沒(méi)有影響寸五。
使用JSON.parse()加JSON.stringify()
let obj = {
name:'tom',
age:10,
friend:{
name:'jack'
}
};
let copy = JSON.parse(JSON.stringify(obj));
obj.name = 'elric';
console.log(obj);// {name: "elric", age: 10, friend: {…}}
console.log(copy);// {name: "tom", age: 10, friend: {…}}
copy對(duì)象的name沒(méi)有因?yàn)閛bj的name變化而變化,說(shuō)明該方法實(shí)現(xiàn)了深拷貝孵睬。缺陷:無(wú)法拷貝函數(shù)播歼、undefined
一、Object.assign()對(duì)象的拷貝
Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象秘狞。
Object.assign(target, ...sources) 【target:目標(biāo)對(duì)象】叭莫,【souce:源對(duì)象(可多個(gè))】
舉個(gè)栗子:
const object1 = {
a: 1,
b: 2,
c: 3
};
const object2 = Object.assign({c: 4, d: 5}, object1);
console.log(object2.c, object2.d);
console.log(object1) // { a: 1, b: 2, c: 3 }
console.log(object2) // { c: 3, d: 5, a: 1, b: 2 }
注意:
1.如果目標(biāo)對(duì)象中的屬性具有相同的鍵,則屬性將被源對(duì)象中的屬性覆蓋烁试。后面的源對(duì)象的屬性將類似地覆蓋前面的源對(duì)象的屬性
2.Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象雇初。該方法使用源對(duì)象的[[Get]]和目標(biāo)
對(duì)象的[[Set]],所以它會(huì)調(diào)用相關(guān) getter 和 setter减响。因此靖诗,它分配屬性,而不僅僅是復(fù)制或定義新的屬性支示。如
果合并源包含getter刊橘,這可能使其不適合將新屬性合并到原型中。為了將屬性定義(包括其可枚舉性)復(fù)制到
原型颂鸿,應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 促绵。
二、Object.assign()對(duì)象的深拷貝
針對(duì)深拷貝嘴纺,需要使用其他辦法败晴,因?yàn)?Object.assign()拷貝的是屬性值。
假如源對(duì)象的屬性值是一個(gè)對(duì)象的引用栽渴,那么它也只指向那個(gè)引用尖坤。
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj1.a = 1;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
最后一次賦值的時(shí)候,b是值是對(duì)象的引用闲擦,只要修改任意一個(gè)慢味,其他的也會(huì)受影響
// Deep Clone (深拷貝)
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
3、對(duì)象的合并
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變墅冷。
其實(shí)就是對(duì)象的拷貝贮缕,o1就是目標(biāo)對(duì)象,后面的是源對(duì)象俺榆,后面的屬性等會(huì)拷貝到目標(biāo)對(duì)象
4感昼、合并具有相同屬性的對(duì)象
const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
1.屬性被后續(xù)參數(shù)中具有相同屬性的其他對(duì)象覆蓋。
2.目標(biāo)對(duì)象的屬性與源對(duì)象的屬性相同罐脊,源的會(huì)覆蓋目標(biāo)的屬性
5.繼承屬性和不可枚舉屬性是不能拷貝
const obj = Object.create({foo: 1}, { // foo 是個(gè)繼承屬性定嗓。
bar: {
value: 2 // bar 是個(gè)不可枚舉屬性。
},
baz: {
value: 3,
enumerable: true // baz 是個(gè)自身可枚舉屬性萍桌。
}
});
創(chuàng)建對(duì)象時(shí)宵溅,如果沒(méi)有設(shè)置enumerable的值殿衰,默認(rèn)為false(不可枚舉屬性)控硼,設(shè)置為true檀何,則為可枚舉屬性
const copy = Object.assign({}, obj);
console.log(copy); // { baz: 3 }
6.原始類型會(huì)被包裝為對(duì)象
const v1 = "abc";
const v2 = true;
const v3 = 10;
const v4 = Symbol("foo")
const obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// 原始類型會(huì)被包裝,null 和 undefined 會(huì)被忽略剧罩。
// 注意宋渔,只有字符串的包裝對(duì)象才可能有自身可枚舉屬性彤委。
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
7.異常會(huì)打斷后續(xù)拷貝任務(wù)
const target = Object.defineProperty({}, "foo", {
value: 1,
writable: false
}); // target 的 foo 屬性是個(gè)只讀屬性驹暑。
Object.assign(target, {bar: 2}, {foo2: 3, foo: 3, foo3: 3}, {baz: 4});
// TypeError: "foo" is read-only
// 注意這個(gè)異常是在拷貝第二個(gè)源對(duì)象的第二個(gè)屬性時(shí)發(fā)生的。
console.log(target.bar); // 2矛市,說(shuō)明第一個(gè)源對(duì)象拷貝成功了芙沥。
console.log(target.foo2); // 3,說(shuō)明第二個(gè)源對(duì)象的第一個(gè)屬性也拷貝成功了浊吏。
console.log(target.foo); // 1而昨,只讀屬性不能被覆蓋,所以第二個(gè)源對(duì)象的第二個(gè)屬性拷貝失敗了找田。
console.log(target.foo3); // undefined歌憨,異常之后 assign 方法就退出了,第三個(gè)屬性是不會(huì)被拷貝到的墩衙。
console.log(target.baz); // undefined躺孝,第三個(gè)源對(duì)象更是不會(huì)被拷貝到的。