ES6 中三種方式定義對象屬性
重復樣本代碼讓開發者很不爽，代碼混亂掩蓋了重要業務代碼。ES6關注並解決一些重復的代碼方式，使代碼簡潔、邏輯清晰，如數組解構、對象解構、箭頭函數等。本文我們主要介紹利用三種方式在初始化對象時定義屬性。
1. 屬性簡寫
屬性簡寫即刪除重復表達。這里定義兩個變量：
const name = "Luke";
const age = 24;
1
2
現在把這兩個變量賦值給對象相同名稱的屬性，這時正常的表達為：
{
name: name,
age: age
}
1
2
3
4
這里重復的名稱顯得多余，對的，ES6允許我們采用簡潔的方式表達：
{
name,
age
}
1
2
3
4
這里簡單通過name代替name:name,JavaScript理解你想把name的值賦值給相同名稱的屬性。
2. 方法屬性
另一個受歡迎的用法是定義方法，即通過給對象屬性賦值函數來實現。為了簡單，我們創建連個getter函數獲取name和age屬性：
{
getName: function() { return "Luke" },
getAge: function() {return 24 }
}
1
2
3
4
同樣這種方案也很冗長，同樣ES6提供了語法糖讓代碼簡潔：
{
getName() { return "Luke" },
getAge() {return 24 }
}
1
2
3
4
3. 計算屬性的名稱
最后我們看通過評估表達式確定計算屬性名稱的情況。
這里定義函數getLo,簡單返回字符串‘lo’。
var getLo = () => "lo"
1
現在通過合並字符串定義對象屬性，字符串為“hel”連接調用getLo()的返回值，其結果為"hello".
在ES6之前，需要兩步才能實現，首先初始化對象，然后使用方括號在對象中創建屬性。
var obj = {};
obj[ "hel" + getLo() ] = "world";
1
2
這不算太壞，但使用ES6可以直接一步完成。
let obj2 = {
[ "hel" + getLo() ]: "world"
}
1
2
3
4. 總結
本文介紹ES6提供三種方式定義屬性讓代碼更簡潔。
————————————————
版權聲明：本文為CSDN博主「夢想畫家」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/neweastsun/article/details/103746344