1. 程式人生 > >細說一下 Object.assign()

細說一下 Object.assign()

Object.assign()

  1. Object.assign() 第一個引數是目標物件,後面的都是源物件。 Object.assign (target, source1,source2, source3, …);
  2. 如果源對像與目標物件有相同的屬性名,或源物件中有相同的屬性名,後面的會覆蓋前邊的值 。
  3. 如果引數傳入的不是Object,會轉成Object
  4. null和undefined 不能作為引數傳入,因為null和undefined 不能轉成Object
  5. 如果發生的值是一個物件,Object.assign的處理方法是直接替換,而不是新增。 如下面的 a 和 b
  6. 可以為類新增方法

    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:'加了一個類進去'}) console.log(JSON.stringify(obj)); console.log("加一個類進去後:"+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()做的是淺拷貝, 如果一個屬性是新合併進來的物件,改變源物件的值,會影響合併後的值 。 let newObj = {type:{aa:'蔬菜'}}; Object.assign(obj, newObj); console.log("合併一個含屬性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合併一個數組的時候,會把陣列當成一個屬性名為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("合併後的陣列為:"+Object.assign(arr1, arr2)); // 得到的結果是: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()); // 輸出的結果為:笑笑,女

輸出的結果:

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":"加了一個類進去","age":"18","education":"undergraduate","height":"170cm","hobby":"painting","arr":{"index":1,"name":"類"}}
ObjectAssignDemo.js:20 加一個類進去後: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 合併一個含屬性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 合併後的陣列為:8,9,10,4,5
ObjectAssignDemo.js:58 userinfo中的資訊為: 笑笑, 女