在 ES6 中，對於物件的使用有了更彈性的應用，除了撰寫物件的方式變得更為精簡之外，更允許將屬性名稱指定為變數，以達到動態賦予屬性名稱的效果，讓我們來看看在 ES6 中物件的擴展吧。
物件的擴展（object literal extension）
在 ES6 中允許在物件中直接給變量，這時候物件的屬性名稱為變數的名稱，物件的屬性值為變數的值，讓我們來看一下這個例子：
let website = "pjchender";
let obj = {website};
console.log(obj); //[Object]{website: "pjchender"}
這時候變數的名稱（website）會變成物件的屬性名稱，變數的值（"pjchener"）會變成物件的屬性值。實際上，let obj = {website} 也是一種縮寫，完整的寫法會是 let obj = {website:website} 它實際上對應的關係如下圖所示：
也因此，如果我們輸入如下的程式碼：
let website = "pjchender";
let obj = {abc:website};
console.log(obj); // [object]{abc: "pjchender}
建立出來的物件，他的屬性名稱就會是 "abc" 而不是 "website"。
我們可以用同樣的方式為多個物件的屬性賦值：
let website = "pjchender";
let country = "Taiwan";
let obj = {
website,
country
};
console.log(obj); // [object]{country: "Taiwan", website: "pjchender"}
在 object literal 中所賦予的值，會覆蓋掉在更上 let 的宣告：
let name = "PJCHEN";
let country = "Taiwan";
let obj_es6 = {
name: "Aaron",
country,
}
console.log(obj_es6); // [Object]{name: "Aaron", country: "Taiwan"}
從這裡我們可以看到最後 name 這個屬性值會是 Aaron 而不是 PJCHEN。
物件中的方法也可以簡寫
除了物件中的屬性可以簡寫外，物件中的方法也可以透過這樣的方式簡寫（第8-10行），例如：
let name = "PJCHEN";
let country = "Taiwan";
let obj = {
name,
country,
location(){
console.log(this.name + ' lives in ' + this.country);
}
}
obj.location(); // PJCHEN lives in Taiwan
這樣方法的簡寫，原本的寫法如下：
let obj = {
name: name,
country: country,
location: function(){
console.log(this.name + ' lives in ' + this.country);
}
}
另外，還有一點需要注意的是，這樣簡寫的方法，預設的屬性名稱會是字串的型態，也因此原本的簡寫 location( ){...} 等同於 'location'( ){...} 。
在 ES6 中允許將表達式作為屬性名稱，以達到動態賦值的效果
在 ES6 中，允許將表達式作為屬性的名稱，只需要使用 [ ] 就可以了，方法如下：
let obj_es = {
["web"+"site"]: "pjchender"
}
console.log(obj_es); // [Object]{website: "pjchender"}
透過這樣的方式，我們更可以去動態賦予屬性名稱：
let websiteName = "pjchender";
let a = 2;
let b = 3;
let obj_es = {
[websiteName]: "welcome",
[a+b]: "sumNumber"
}
console.log(obj_es); // [Object]{5: "sumNumber", pjchender: "welcome"}
透過 [ ] 的方式，我們的屬性名稱就可以放入變數，以達到動態給予屬性名稱的效果。
0 意見:
張貼留言