一： 對(duì)象操作

var obj = {
            a: 1,
            b: {b1: 'B1', b2: 'B2', b3: 'B3'},
            c: {
                  c1: 'C1',
                  c2: ['C20', 'C21', 'C22'],
                  c3: {
                          c30: '我是c30',
                          c31: '我是c31',
                          c32: '我是c32'
                      }
               }
          }

• 刪除對(duì)象的屬性

delete obj.a; //關(guān)鍵字delete可以刪除對(duì)象的屬性

• 合并兩個(gè)對(duì)象Object.assign() 參考鏈接

var target = {a : 1},  //合并目標(biāo)對(duì)象
    source1 = {b: 2},  //源對(duì)象1
    source2 = {c: 3},  //源對(duì)象2
    source3 = {c: 4}   //源對(duì)象3,注意和源對(duì)象2中有同名屬性c

1 Object.assign()接口可以接收多個(gè)參數(shù)遭京，第一個(gè)參數(shù)是目標(biāo)對(duì)象浮禾，后面的都是源對(duì)象澄峰，assign方法將多個(gè)原對(duì)象的屬性和方法都合并到了目標(biāo)對(duì)象上面鲁猩，如果在這個(gè)過(guò)程中出現(xiàn)同名的屬性（方法）糠惫，后合并的屬性（方法）會(huì)覆蓋之前的同名屬性（方法）蹬刷。

Object.assign(target, source1, source2, source3); //結(jié)果{a: 1, b: 2, c: 4}

2 assign的設(shè)計(jì)目的是用于合并接口的遥金，所以它接收的第一個(gè)參數(shù)（目標(biāo)）應(yīng)該是對(duì)象可很，如果不是對(duì)象的話(huà)鳄虱，它會(huì)在內(nèi)部轉(zhuǎn)換成對(duì)象弟塞，所以如果碰到了null或者undefined這種不能轉(zhuǎn)換成對(duì)象的值的話(huà)，assign就會(huì)報(bào)錯(cuò)拙已。但是如果源對(duì)象的參數(shù)位置决记，接收到了無(wú)法轉(zhuǎn)換為對(duì)象的參數(shù)的話(huà)，會(huì)忽略這個(gè)源對(duì)象參數(shù)倍踪。

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const o = Object.assign({}, v1, v2, v3);
console.log(o); // { "0": "a", "1": "b", "2": "c" }

為什么會(huì)出現(xiàn)這個(gè)結(jié)果呢霉涨？首先，第一個(gè)參數(shù)位置接收到的是對(duì)象惭适，所以不會(huì)報(bào)錯(cuò)笙瑟，其次，由于字符串轉(zhuǎn)換成對(duì)象時(shí)癞志，會(huì)將字符串中每個(gè)字符作為一個(gè)屬性往枷，所以，abc三個(gè)字符作為“0”凄杯，“1”错洁，“2”三個(gè)屬性被合并了進(jìn)去，但是布爾值和數(shù)值在轉(zhuǎn)換對(duì)象時(shí)雖然也成功了戒突，但是屬性都是不可枚舉的屯碴，所以屬性沒(méi)有被成功合并進(jìn)去。在這里需要記住assign不會(huì)合并不可枚舉的屬性

Object(true);  //{[[PrimitiveValue]]: true}
Object(10);    //{[[PrimitiveValue]]: 10}
Object("abc"); //{0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面就是對(duì)于布爾值膊存、數(shù)值和字符串轉(zhuǎn)換成對(duì)象后得到的結(jié)果导而。
3 同樣忱叭，Object.assign拷貝的屬性是有限制的，只會(huì)拷貝對(duì)象本身的屬性（不會(huì)拷貝繼承屬性）今艺，也不會(huì)拷貝不可枚舉的屬性韵丑。但是屬性名為Symbol值的屬性，是可以被Object.assign拷貝的虚缎。
如果assign只接收到了一個(gè)對(duì)象作為參數(shù)的話(huà)撵彻，就是說(shuō)沒(méi)有源對(duì)象要合并到目標(biāo)對(duì)象上，那會(huì)原樣把目標(biāo)對(duì)象返回实牡。

知識(shí)要點(diǎn)

① Object.assign進(jìn)行的拷貝是淺拷貝陌僵。也就是說(shuō)，如果拷貝過(guò)來(lái)的屬性的值是對(duì)象等復(fù)合屬性创坞，那么只能拷貝過(guò)來(lái)一個(gè)引用碗短。

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
console.log(obj2.a.b);// 2

由于是淺拷貝，所以屬性a的內(nèi)部有任何變化摆霉，都會(huì)在目標(biāo)對(duì)象上呈現(xiàn)出來(lái)豪椿。

② Object.assign進(jìn)行合并的時(shí)候，一旦碰到同名屬性携栋，就會(huì)出現(xiàn)覆蓋現(xiàn)象搭盾。所以使用時(shí)務(wù)必小心。
③ Object.assign是針對(duì)Object開(kāi)發(fā)的API婉支，一旦在源對(duì)象的參數(shù)未知接收到了其他類(lèi)型的參數(shù)鸯隅，會(huì)嘗試類(lèi)型轉(zhuǎn)換。如果是數(shù)組類(lèi)型的話(huà)向挖，類(lèi)型轉(zhuǎn)換的結(jié)果是將每個(gè)數(shù)組成員的值作為屬性鍵值蝌以，將數(shù)組成員在數(shù)組中的位置作為屬性鍵名。多個(gè)數(shù)組組成參數(shù)一同傳入的話(huà)還會(huì)造成覆蓋何之。具體例子如下：

Object.assign([1, 2, 3], [4, 5]);//[4, 5, 3]

上面代碼中跟畅，assign把數(shù)組視為屬性名為 0、1溶推、2 的對(duì)象徊件，因此源數(shù)組的 0 號(hào)屬性4覆蓋了目標(biāo)數(shù)組的 0 號(hào)屬性1。
因?yàn)?/p>

Object([1, 2, 3]); //[1, 2, 3]
Object([4, 5]);    //[4, 5]

數(shù)組是特殊的對(duì)象.png

從上圖可以看出蒜危，Object.assign([1, 2, 3], [4, 5]);的執(zhí)行步驟

• [1, 2, 3]這個(gè)數(shù)組屬性0鍵值為1虱痕，屬性1鍵值為2， 屬性2鍵值為3
• [4, 5]???這個(gè)數(shù)組?屬性0鍵值為4,???屬性1鍵值為5
• Object.assign()會(huì)合并相同屬性靠后的目標(biāo)對(duì)象的鍵值辐赞，所以數(shù)組[4, 5]覆蓋了目標(biāo)數(shù)組[1, 2, 3]的0號(hào)屬性和1號(hào)屬性的值部翘，最后得到一個(gè)數(shù)組[4, 5, 3]

④Object.assign只能將屬性值進(jìn)行復(fù)制，如果屬性值是一個(gè)get（取值函數(shù)）的話(huà)响委，那么會(huì)先求值新思，然后再?gòu)?fù)制窖梁。

//源對(duì)象
const source = {
             //屬性是取值函數(shù)
            get foo() {return 1} 
}
//目標(biāo)對(duì)象
const target = {};
Object.assign(target, source);
//{foo ; 1}  此時(shí)foo的值是get函數(shù)的求值結(jié)果,foo作為屬性，get函數(shù)的求值結(jié)果作為值

Object.assign方法的常見(jiàn)用途

• 為對(duì)象添加屬性

Class Point {constructor(x, y) {Object.assign(this, {x, y})}}
上面的方法可以為對(duì)象Point類(lèi)的實(shí)例對(duì)象添加屬性x和屬性y表牢。

• 為對(duì)象添加方法

// 方法也是對(duì)象
// 將兩個(gè)方法添加到類(lèi)的原型對(duì)象上
// 類(lèi)的實(shí)例會(huì)有這兩個(gè)方法
Object.assign(someClass.prototype, someMethod(arg1, arg2){...}, anotherMethod(){...});
//這樣someClass的實(shí)例就會(huì)有someMethod和anotherMethod這兩個(gè)方法

將方法添加到類(lèi)的原型對(duì)象上后窄绒，類(lèi)的實(shí)例能繼承這兩個(gè)方法贝次。

• 克隆對(duì)象

//克隆對(duì)象的方法
function clone(origin) {
    //獲取origin的原型對(duì)象
    let originProto = Object.getPrototypeOf(origin);
    //根據(jù)原型對(duì)象崔兴，創(chuàng)建新的空對(duì)象，再assign
    return Object.assign(Object.create(originProto),origin);
}

• 為屬性指定默認(rèn)值

//默認(rèn)值對(duì)象
const DEFAULTS = {
        logLevel: 0,
        outputFormat: 'html'
};
// 利用assign同名屬性會(huì)覆蓋的特性蛔翅，指定默認(rèn)值敲茄，如果options里有新值的話(huà)，會(huì)覆蓋掉默認(rèn)值
function processContent(options) {
        options = Object.assign({}, DEFAULTS, options);
        console.log(options);  
        //...
}

處于assign淺拷貝的顧慮山析，DEFAULTS對(duì)象和options對(duì)象此時(shí)的值最好都是簡(jiǎn)單類(lèi)型的值堰燎，否則函數(shù)會(huì)失效。

const DEFAULTS = {
          url: {
              host: 'example.com',
              port: 7070
          }
}
processContent({url: {port: 8000}});
/**
*   {url: { port: 8000}}
*/

上面的代碼笋轨，由于url是對(duì)象類(lèi)型秆剪，所以默認(rèn)值的url被覆蓋掉了，但是內(nèi)部缺少了host屬性爵政，形成了一個(gè)bug仅讽。
jQuery有類(lèi)似的方法$.extend({},obj1, obj2)

• 快速?gòu)?fù)制對(duì)象且不影響源對(duì)象的方法
  1： 如果是簡(jiǎn)單對(duì)象，即對(duì)象的屬性不是數(shù)組钾挟、對(duì)象洁灵、函數(shù)..等復(fù)雜對(duì)象時(shí)，可以用上面介紹的Object.assign()來(lái)完成快速?gòu)?fù)制掺出；
  2： 如果是復(fù)雜對(duì)象徽千，有更簡(jiǎn)便的辦法，通過(guò)var obj2 = JSON.parse(JSON.stringify(obj1))來(lái)快速?gòu)?fù)制汤锨，具體如下：

var a = {
      name: '張三',
      age: 18
};
var b = JSON.parse(JSON.stringify(a));
//此時(shí)b和a是完全相同的双抽，但是b和a是兩個(gè)完全不相干的對(duì)象，此時(shí)對(duì)b增減屬性闲礼，都不會(huì)影響到a見(jiàn)下圖
b.sex = '男';
console.log(a);//結(jié)果見(jiàn)下圖
console.log(b);//結(jié)果見(jiàn)下圖

通過(guò)JSON.parse(JSON.stringify(obj))快速?gòu)?fù)制對(duì)象.png