Object.assign()
-- 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對象分配到目標(biāo)對象训枢。它將返回目標(biāo)對象托修。
-- 它是一個(gè)淺拷貝恒界,如果源對象的屬性是一個(gè)引用類型的睦刃,它僅僅會復(fù)制其引用值。
- Object.assign() 第一個(gè)參數(shù)是目標(biāo)對象十酣,后面的都是源對象涩拙。 Object.assign (target, source1,source2, source3, ...);
- 如果源對像與目標(biāo)對象有相同的屬性名,或源對象中有相同的屬性名耸采,后面的會覆蓋前邊的值 兴泥。
- 如果參數(shù)傳入的不是Object臣缀,會轉(zhuǎn)成Object
- null和undefined 不能作為參數(shù)傳入王滤,因?yàn)閚ull和undefined 不能轉(zhuǎn)成Object
- 如果發(fā)生的值是一個(gè)對象淋叶,Object.assign的處理方法是直接替換央拖,而不是添加。 如下面的 a 和 b
- 可以為類添加方法
const obj1 = {name:'小明', age:'18',education:'undergraduate'}
const obj2 = {height:'180cm',hobby:'painting'}
let obj = Object.assign({},obj1, obj2)
console.log('合并后的類:');
console.log(JSON.stringify(obj));
Object.assign(obj, obj, {height:'170cm'});
console.log('修改過height后的類:');
console.log(JSON.stringify(obj));
Object.assign(obj, {arr:{index:1, name:'類'}}, {name:'加了一個(gè)類進(jìn)去'})
console.log(JSON.stringify(obj));
console.log("加一個(gè)類進(jìn)去后:"+obj.arr.index);
// a. 這種修改方式润讥,只會修改index 的值
Object.assign(obj, Object.assign(obj.arr, {index:2}))
console.log(JSON.stringify(obj));
console.log("修改類index后:"+obj.arr.index);
// b. 這種修改方式呛梆,arr只剩下index屬性
// Object.assign(obj, {arr:{index:2}}, {name:'修改類的index為:2'})
// console.log(JSON.stringify(obj));
// console.log("修改類index后:"+obj.arr.index);
// Object.assign()做的是淺拷貝吟税, 如果一個(gè)屬性是新合并進(jìn)來的對象燥翅,改變源對象的值骑篙,會影響合并后的值 。
let newObj = {type:{aa:'蔬菜'}};
Object.assign(obj, newObj);
console.log("合并一個(gè)含屬性type的類后:"+JSON.stringify(obj));
// c. 這種不會影響obj中的type.aa
// Object.assign(newObj, {type:{aa:'水果'}});
// d. 這種會影響obj中的type.aa
newObj.type.aa = '水果';
console.log("修改newObj中的type.aa后:"+JSON.stringify(newObj));
console.log("修改newObj中的type.aa后:"+JSON.stringify(obj));
// e. 用Object.assign合并一個(gè)數(shù)組的時(shí)候森书,會把數(shù)組當(dāng)成一個(gè)屬性名為index的類
const arr1 = [1, 2, 3, 4, 5] ; // 在Object的眼里是這樣的: arr1={0:1, 1:2, 2:3谎势,3:4凛膏, 4:5}
const arr2 = [8, 9, 10]; // 在Object的眼里是這樣的: arr2={0:8, 1:9, 2:10}
console.log("合并后的數(shù)組為:"+Object.assign(arr1, arr2)); // 得到的結(jié)果是:8, 9, 10, 4, 5
// f. Object.assign() 為類添加方法
Object.assign(UserInfo.prototype, {
getUserName (){
return this.name;
},
getUserGender (){
return this.gender ;
}
})
let user = new UserInfo("笑笑", '女');
console.log("userinfo中的信息為: "+ user.getUserName() +", "+user.getUserGender()); // 輸出的結(jié)果為:笑笑,女
輸出的結(jié)果:
ObjectAssignDemo.js:13 合并后的類:
ObjectAssignDemo.js:14 {"name":"小明","age":"18","education":"undergraduate","height":"180cm","hobby":"painting"}
ObjectAssignDemo.js:16 修改過height后的類:
ObjectAssignDemo.js:17 {"name":"小明","age":"18","education":"undergraduate","height":"170cm","hobby":"painting"}
ObjectAssignDemo.js:19 {"name":"加了一個(gè)類進(jìn)去","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":1,"name":"類"}}
ObjectAssignDemo.js:20 加一個(gè)類進(jìn)去后:1
ObjectAssignDemo.js:24 {"name":"類","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"類"},"index":2}
ObjectAssignDemo.js:25 修改類index后:2
ObjectAssignDemo.js:35 合并一個(gè)含屬性type的類后:{"name":"類","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"類"},"index":2,"type":{"aa":"蔬菜"}}
ObjectAssignDemo.js:40 修改newObj中的type.aa后:{"type":{"aa":"水果"}}
ObjectAssignDemo.js:41 修改newObj中的type.aa后:{"name":"類","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":2,"name":"類"},"index":2,"type":{"aa":"水果"}}
ObjectAssignDemo.js:46 合并后的數(shù)組為:8,9,10,4,5
ObjectAssignDemo.js:58 userinfo中的信息為: 笑笑, 女
淺拷貝舉例
let a ={id:1001};
let b = {name: 'testname', idObj: a};
let c = Object.assign ({}, b);
a.id = 999; // 此時(shí)b脏榆、c 中的idObj.id 都會變成999猖毫。 這就是淺拷貝了。 用的時(shí)候一定要注意须喂。
console.log("cid"+ c.idObj.id+", bid"+b.idObj.id); // 這兩個(gè)都是999