ES6之對象的擴展

JavaScript的世界，萬物皆對象，ES6對對象有一些很大的升級。

屬性簡介表示：

容許直接寫入變量和函數，屬性名爲變量名，屬性值爲變量值：

var a = 1;var b = 2;

console.log({a, b})//{a: 1, b: 2}
複製代碼

方法簡寫應該就不用多說了：

getData(){

}
複製代碼

使用exports的時候咱們就常常用：

var a = function(){}

var b = function(){}

module.exports = {  

  a: a,  

  b: b

}
複製代碼

等同於：

module.exports = {a, b}
複製代碼

屬性名：

對象使用字面量方式定義屬性只有一種方法：

var obj = {  

  a: 1

}
複製代碼

ES6支持表達式做爲對象的屬性名：

var a = 'test';

var obj = {  

  [a]: 1

}

console.log(obj);//{test: 1}
複製代碼

函數name屬性在函數擴展說過了，對象的函數如今也有name屬性。

屬性可枚舉和遍歷：

對象有一個描述對象，經過Object.getOwnPropertyDescriptor方法能夠獲取：

var obj = {  

  a: 1

}

console.log(Object.getOwnPropertyDescriptor(obj, 'a'));

//{value: 1, writable: true, enumerable: true, configurable: true}
複製代碼

enumberable是可枚舉屬性，若是是false，某些操做就會忽略當前的屬性：

var obj = {  

  a: 1,  

  b: 2

}

Object.defineProperty(obj, 'a', {  

  enumerable: false

})

for(let val in obj){   

 console.log(val);//b

}
複製代碼

目前有四個方法會把不可枚舉的忽略：

for...in循環、Object.keys()、JSON.stringify()、Object.assign()這四個方法都會不遍歷不可枚舉的屬性。前三個是ES5的，最後一個是ES6的。

可枚舉屬性就是爲了讓某些屬性能夠不被枚舉，好比length、toString等，咱們是但願不被循環出來的。ES6的Class原型的方法都是不可枚舉的。

遍歷對象屬性鍵名有五種方法：

For in不含symbol

Object.keys()返回數組，不包含symbol

Object.getOwnPropertyNames()返回數組，不可枚舉的也包括，不包括symbol

Object.getOwnPropertySymbols()返回數組，全部symbol的鍵名。

Reflect.ownKeys()返回數組，包括全部的鍵名，無論可枚舉不可枚舉。

super關鍵字，這邊說一下，JavaScript引擎如今只能識別對象方法的簡寫定義的是對象方法：

var obj = {  

  test() {  

  }

}
複製代碼

super關鍵字只能用在對象方法中，指向當前對象的原型對象，但只是當前對象，this的指向是不變的：

var proto = {  

  a: 'a', 

   b: 'a'

};

var obj = {  

  a: 'b',  

  b: 'b', 

   test() {   

     console.log(this.b);//b   

     return super.a;  

  }

};

Object.setPrototypeOf(obj, proto);

console.log(obj.test()); // "a"
複製代碼

擴展運算符和結構賦值，以前有說過，這邊就分享幾個點：

解構賦值是淺拷貝

擴展運算符的解構不能複製原型的屬性

var o = Object.create({ x: 1, y: 2 });

o.z = 3;

let { x, ...newObj } = o;

console.log(newObj);//{z: 3}
複製代碼

ES6對對象新增了不少方法：

Object.is()跟嚴格相等（===）同樣，多加了兩個不一樣，+0不等於-0和NAN等於NAN。

console.log(+0 === -0); //true

console.log(NaN === NaN); // false

console.log(Object.is(+0, -0)); // false

console.log(Object.is(NaN, NaN)); // true
複製代碼

Object.assign，我以爲這個方法不用多介紹，就是合併對象到第一個參數。須要注意的是，參數放後面的，若是屬性相同，會被後面的覆蓋。

Undefined和null當作首參數會報錯，不是對象的會轉成對象返回，非對象的參數不在第一個，不能轉成對象就會跳過。布爾值和數字也會跳過。且只會拷貝可枚舉的自身屬性。

assign方法是淺拷貝，函數是沒法複製的。

ES2017引入Object.getOwnPropertyDescriptors()，返回全部對象屬性的描述：

const obj = {  

  foo: 'world',  

  find() {    

    return super.foo;  

  }

};

console.log(Object.getOwnPropertyDescriptors(obj));

find: 

 configurable: true 

 enumerable: true 

 value: ƒ find() 

 writable: truefoo: 

 configurable: true 

 enumerable: true 



 value: "world" 

 writable: true
複製代碼

ES2015的Object.getOwnPropertyDescriptor()是獲取某一個。

Object.setPrototypeOf()（寫操做）

Object.getPrototypeOf()（讀操做）

Object.create()（生成操做）

這三個方法都是對原型的操做，好比set就是改變原型的指向：

var proto = {};

var obj = { a: 1 };

Object.setPrototypeOf(obj, proto);

proto.b = 20;

console.log(obj.b);//20
複製代碼

Obj的原型指向了proto。

ES5的Object.keys()，ES2017的Object.values()，Object.entries()，這三個方法都是返回數組，一個是鍵值，一個是屬性值，一個是鍵值對。包含可枚舉且不是symbol的自身屬性。

Object.fromEntries()是Object.entries()的逆操做，把鍵值對的數組變成對象：

console.log(Object.fromEntries([    ['a', 'a'],    ['b', 'b']]));

//{a: "a", b: "b"}

複製代碼