object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象(sources)分配到目標(biāo)對(duì)象(target),并返回目標(biāo)對(duì)象;語(yǔ)法“Object.assign(target, …sources)”,參數(shù)“target”是指目標(biāo)對(duì)象,即接收源對(duì)象屬性的對(duì)象,也是修改后的返回值,參數(shù)“sources”是指源對(duì)象,包含將被合并的屬性。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
Object.assign() 的用法
該方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象(sources)分配到目標(biāo)對(duì)象(target),并返回目標(biāo)對(duì)象。
Object.assign(target, ...sources)
target:目標(biāo)對(duì)象,接收源對(duì)象屬性的對(duì)象,也是修改后的返回值。
sources:源對(duì)象,包含將被合并的屬性。
const target = { a: 1, b: 2 }; const source1 = { b: 4, c: 5 }; const source2 = { b: 6, c: 7 }; const obj = Object.assign(target,source1,source2); console.log(obj); // (a: 1, b: 6, c: 7)
注意:
1、源對(duì)象屬性與目標(biāo)對(duì)象屬性不同,則會(huì)被拷貝到目標(biāo)對(duì)象中;
2、如果目標(biāo)對(duì)象和源對(duì)象有相同的屬性,目標(biāo)對(duì)象的屬性值會(huì)被源對(duì)象的屬性值覆蓋掉;
3、如果有多個(gè)源對(duì)象有相同的屬性,那么目標(biāo)對(duì)象的屬性將會(huì)被最后一個(gè)源對(duì)象屬性覆蓋。
const obj1 = Object.create({foo: 1}, { // foo 是個(gè)繼承屬性。 bar: { value: 2 // bar 是個(gè)不可枚舉屬性。 }, baz: { value: 3, enumerable: true // baz 是個(gè)自身可枚舉屬性。 } }); const obj= Object.assign({}, obj1); console.log(obj); // { baz: 3 } //創(chuàng)建對(duì)象時(shí),如果沒(méi)有設(shè)置enumerable的值,默認(rèn)為false(不可枚舉屬性),設(shè)置為true,則為可枚舉屬性
注意:Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象,繼承的和不可枚舉的屬性不會(huì)拷貝。
Object.assign()拷貝是淺拷貝,它拷貝的是屬性值,假如源對(duì)象的屬性值是一個(gè)對(duì)象 obj,那么拷貝的則是這個(gè)對(duì)象值的指針(也就是地址);這個(gè)時(shí)候修改obj 的值,則目標(biāo)對(duì)象會(huì)受到影響。
想要避免這種影響我們需要對(duì)對(duì)象進(jìn)行深拷貝:
let obj1 = { a: 1, b: {c: 2 }}; let obj2 = { d: 2 }; let obj = Object.assign(obj2,JSON.parse(JSON.stringify(obj1))); console.log(obj); // { d: 2, a:1, b:{ c:2 }} obj1.b.c = 4; console.log(obj); // { d: 2, a:1, b:{ c:2 }} // 對(duì)象obj1.b.c 值的變化則不會(huì)再影響到目標(biāo)對(duì)象 obj 的值。
注意:深拷貝只能解決引用類(lèi)型的值拷貝,對(duì)于繼承和不可枚舉屬性依然不可以拷貝。
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ì)被拷貝到的。
原始類(lèi)型會(huì)被包裝,null 和 undefined 會(huì)被忽略。
const obj1 = 'aaa'; const obj2 = false; const obj3 = true; const obj4 = 10; const obj= Object.assign(obj1,obj2,obj3,obj4); console.log(obj); // { 0:'a', 1:'a', 2:'a'}
注意:只有字符串的包裝對(duì)象才可能有自身可枚舉屬性。
【推薦學(xué)習(xí):javascript視頻教程】