ES6物件簡潔語法

物件（object）是 JavaScript 最重要的資料結構，ES6 對它進行了重大升級，本章介紹資料結構本身的改變及語法應用細節，

1.屬性的簡潔表示法
◆ ES6 允許直接寫入變數和函式，作為物件的屬性和方法，這樣的書寫更加簡潔，
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};

◆ ES6 允許在物件之中，直接寫變數，這時，屬性名為變數名, 屬性值為變數的值，
function f(x, y) {
return {x, y};
}
// 等同于
function f(x, y) {
return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}

◆ 除了屬性簡寫，方法也可以簡寫，
const o = {
method() {
return "Hello!";
}
};
// 等同于
const o = {
method: function() {
return "Hello!";
}
};

如:
let birth = '2000/01/01';
const Person = {
name: '張三',
birth, //等同于birth: birth[重要]
hello() { console.log('我的名字是', this.name); } // 等同于hello: function ()...
};

這種寫法用于函式的回傳值，非常方便，
function getPoint() {
const x = 1;
const y = 10;
return {x, y};
}
getPoint() // {x:1, y:10}

◆ CommonJS 模塊輸出一組變數，就非常合適使用簡潔寫法
let ms = {};
function getItem (key) {
return key in ms ? ms[key] : null;
}
function setItem (key, value) {
ms[key] = value;
}
function clear () {
ms = {};
}
module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
getItem: getItem,
setItem: setItem,
clear: clear
};

◆ 注意，簡潔寫法的屬性名總是字串，這會導致一些看上去比較奇怪的結果，
const obj = {
class () {}
};
// 等同于
var obj = {
'class': function() {}
};

2.屬性名運算式
JavaScript 定義物件的屬性，有兩種方法，
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
上面代碼的方法一是直接用識別符號作為屬性名，方法二是用運算式作為屬性名，這時要將運算式放在方括號之內，
但如果使用字面量方式定義物件（使用大括號），在 ES5 中只能使用方法一（識別符號）定義屬性，
var obj = {
foo: true,
abc: 123
};
ES6 允許字面量定義物件時，用方法二（運算式）作為物件的屬性名，即把運算式放在方括號內，
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"

◆ 運算式還可以用于定義方法名，
let obj = {
['h' + 'ello']() {
return 'hi';
}
};
obj.hello() // hi
注意，屬性名運算式與簡潔表示法，不能同時使用，會報錯，
// 報錯
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正確
const foo = 'bar';
const baz = { [foo]: 'abc'};
注意，屬性名運算式如果是一個物件，默認情況下會自動將物件轉為字串[object Object]，這一點要特別小心，

3.方法的 name 屬性
函式的name屬性，回傳函式名，物件方法也是函式，因此也有name屬性，
const person = {
sayName() {
console.log('hello!');
},
};
person.sayName.name // "sayName"
上面代碼中，方法的name屬性回傳函式名（即方法名），

4.物件的擴展運算子
A.解構賦值
物件的解構賦值用于從一個物件取值，相當于將目標物件自身的所有可遍歷的（enumerable）、但尚未被讀取的屬性，分配到指定的物件上面，所有的鍵和它們的值，都會拷貝到新物件上面，
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
決議:變數z是解構賦值所在的物件，它獲取等號右邊的所有尚未讀取的鍵（a和b），將它們連同值一起拷貝過來，
注意事項:
1.解構賦值要求等號右邊是一個物件，所以如果等號右邊是undefined或null，就會報錯，因為它們無法轉為物件，
let { ...z } = null; // 運行時錯誤
let { ...z } = undefined; // 運行時錯誤

2.解構賦值必須是最后一個引數，否則會報錯
let { ...x, y, z } = someObject; // 語法錯誤
let { x, ...y, ...z } = someObject; // 語法錯誤

B.擴展運算子
物件的擴展運算子（...）用于取出引數物件的所有可遍歷屬性，拷貝到當前物件之中，
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"}

如果擴展運算子后面是一個空物件，則沒有任何效果，
{...{}, a: 1} // { a: 1 }

如果擴展運算子后面不是物件，則會自動將其轉為物件，
// 等同于 {...Object(1)}
{...1}
// {}擴展運算子后面是整數1，會自動轉為數值的包裝物件Number{1}，由于該物件沒有自身屬性，所以回傳一個空物件

5 物件的新增語法
01 Object.is
用來比較兩個值是否嚴格相等，與嚴格比較運算子（===）的行為基本一致，
123==“123” //true
123===“123” //false
Console.log(Object.is(123,”123”)) // false

02 Object. assign
Object.assign用來合并物件
//let 新的物件 = Object.assign(目標物件, source1, srouce2....)
03 Object. Keys/values/entries
`Object.keys()`：回傳物件自身的所有可列舉的屬性的鍵名，
Object.values()`：回傳物件自身的所有可列舉的屬性的值
Object. entries ()`：回傳物件自身的所有可列舉的名、值對

標籤：JavaScript

上一篇：React/JSX簡介

下一篇：React/虛擬DOM