ES6學習筆記（對象）

1.屬性的簡潔表示法

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}  // 等同於 const baz = {foo: foo};

ES6 容許在對象之中，直接寫變量。這時，屬性名爲變量名, 屬性值爲變量的值。

let birth ='2000/01/01';
const Person={
 name:'張三',
 //等同於birth: birth 
 birth,
 // 等同於hello: function ()... 
 hello(){ console.log('個人名字是', this.name); }
};

 

2.屬性名的表達式

let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};

let lastWord = 'last word';
const a = {
'first word': 'hello',
[lastWord]: 'world'
};
a['first word'] // "hello" a[lastWord] // "world" a['last word'] // "world"

ES6 容許字面量定義對象時，用（表達式）做爲對象的屬性名，即把表達式放在方括號內。

注意，屬性名錶達式若是是一個對象，默認狀況下會自動將對象轉爲字符串 [object Object] ，這一點要特別當心。

const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {
[keyA]: 'valueA',
[keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}

 

 3.屬性的遍歷

ES6 一共有 5 種方法能夠遍歷對象的屬性。

（1）for...in

for...in循環遍歷對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

（2）Object.keys(obj)

Object.keys返回一個數組，包括對象自身的（不含繼承的）全部可枚舉屬性（不含 Symbol 屬性）的鍵名。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一個數組，包含對象自身的全部屬性（不含 Symbol 屬性，可是包括不可枚舉屬性）的鍵名。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一個數組，包含對象自身的全部 Symbol 屬性的鍵名。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一個數組，包含對象自身的全部鍵名，無論鍵名是 Symbol 或字符串，也無論是否可枚舉。

以上的 5 種方法遍歷對象的鍵名，都遵照一樣的屬性遍歷的次序規則。

• 首先遍歷全部數值鍵，按照數值升序排列。
• 其次遍歷全部字符串鍵，按照加入時間升序排列。
• 最後遍歷全部 Symbol 鍵，按照加入時間升序排列。

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()] 

 

上面代碼中，Reflect.ownKeys方法返回一個數組，包含了參數對象的全部屬性。這個數組的屬性次序是這樣的，首先是數值屬性2和10，其次是字符串屬性b和a，最後是 Symbol 屬性。

4.對象的擴展運算符

 （1）解構賦值

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1 y // 2 z // { a: 3, b: 4 }

上面代碼中，變量z是解構賦值所在的對象。它獲取等號右邊的全部還沒有讀取的鍵（a和b），將它們連同值一塊兒拷貝過來。

因爲解構賦值要求等號右邊是一個對象，因此若是等號右邊是 undefined 或 null ，就會報錯，由於它們沒法轉爲對象。

let { ...z } = null; // 運行時錯誤 let { ...z } = undefined; // 運行時錯誤

解構賦值必須是最後一個參數，不然會報錯。

let { ...x, y, z } = someObject; // 句法錯誤 let { x, ...y, ...z } = someObject; // 句法錯誤

 解構賦值的一個用處，是擴展某個函數的參數，引入其餘操做。

function baseFunction({ a, b }) {
 // ... }
function wrapperFunction({ x, y, ...restConfig }) {
 // 使用 x 和 y 參數進行操做   // 其他參數傳給原始函數  return baseFunction(restConfig);
}

 （2）擴展運算符

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }

 因爲數組是特殊的對象，因此對象的擴展運算符也能夠用於數組。

let foo = { ...['a', 'b', 'c'] };
foo // {0: "a", 1: "b", 2: "c"}

 擴展運算符能夠用於合併兩個對象。

let ab = { ...a, ...b }; // 等同於 let ab = Object.assign({}, a, b);

 這用來修改現有對象部分的屬性就很方便了。

let newVersion = {
...previousVersion,
name: 'New Name' // Override the name property };

上面代碼中，newVersion對象自定義了name屬性，其餘屬性所有複製自previousVersion對象。

 與數組的擴展運算符同樣，對象的擴展運算符後面能夠跟表達式。

const obj = {
...(x > 1 ? {a: 1} : {}),
b: 2,
};