javascript 之 擴展對象 Object.assing

語法：Object.assign(target,...source)

說明：Object.assign方法的第一個參數是目標對象，后面的參數都是源對象

一、以對象為參數的合並

1、第一個參數都是對象，后面的參數都是源對象

const target={a:1};
const source1={b:2};
const source2={c:2};
Object.assign(target,source1,source2);
輸出：console.log(target);//{a:1,b:2,c:3}

2、 若只有一參數，會直接返回該參數

const obj={a:1};
consolt.log(Object.is(Object.asign(obj),obj));
輸出：ture;

3、如果該參數不是對象會先轉成對象

console.log(Object.assign(2));
輸出：Number對象，其值為 2
console.log(typeof Object.assign(2));
輸出：object

4、undefined和null無法轉成對象，會報錯

console.log(Object.assign(undefined));//報錯
console.log(Object.assign(null));//報錯　　

 

二、如果非對象參數出現在源對象的位置上

1、如果undefined和null不在首參數，就不會報錯

let obj1={a:1};
console.log(Object.is(Object.assign(obj1,undefined),obj1));
輸出：true
console.log(Object.is(Object.assign(obj1,null),obj1));
輸出：true

2、其他類型的值不在首參數也不會報錯。但是目標對象一般都是對象，所以源對象也應該是對象。

const v1='abc';
const v2=true;
const v3={'Symbol':0};
const v4=10;
const v5=5;
const v6=7;
const obj2=Object.assign({},v1,v2,v3,v4);
console.log(obj2);
輸出：{0:'a',1:'b',2:'c','Symbol':0};
const obj3=Object.assign({},v4,v5,v6);
輸出：{}
const obj3=Object.assgin(v4,v5,v6);
輸出：Number對象，沒有值

3、Object.assign拷貝的屬性是有限制的，只拷貝源對象的自身屬性（不拷貝繼承屬性，也不拷貝不可枚舉的屬性）

Object.assign({b:'c'},Object.defineProperty({},'invisible',{enumerable:false,value:'hello'}));
最后的結果沒有驗證：//{b:'c'}

4、同名屬性的替換（不管該屬性的值是否為對象）　

const v1={a:{b:1}};
const v2=Object.assign({a:3,b:4},v1);
console.log(v2.a.b);
輸出結果：1

5、數組的處理，把數組視為對象（就像上面有一個案例 v1=‘abc’，變為 0:'a',1:'b',2:'c'）

var v5=Object.assign([1,2,3],[4,5]);
console.log(v5);
輸出：[4,5,3]

6、取值函數的處理，若復制的值是取值函數，那么求值后再復制

const v4={get foo(){return 1}};
const target={};
console.log(Object.assign(target,v4));
輸出：{foo:1}
console.log(target.foo);
輸出：1

三、常見的用途

1、為對象添加屬性　

class Point{
   constructor(x,y){
      Object.assign(this,{x,y});
   }      
}  

擴展內容：class聲明創建一個基於原型繼承的具有給定名稱的新類

    class Polygon {
        constructor(height, width) {
            this.area = height * width;
        }
     }

     console.log(new Polygon(4,3).area);

     // expected output: 12

2、為對象添加方法

Object.assign(SomeClass.prototype,{someMethod(arg1,arg2){},anotherMethod(){}});

3、克隆對象

function clone(obj){
   return Object.assign({},obj);  
}

4、合並多個對象

 const merge=(target,...sources)=>Object.assign(target,...sources);

5、為屬性指定默認值

const DEFAULTS = {
　　logLevel: 0,
　　outputFormat: 'html'
};

function processContent(options) {
　　options = Object.assign({}, DEFAULTS, options);
　　console.log(options);
　　// ...
}