[TOC] >[success] # 對象字面量語法的擴展 ~~~ '對象字面量'是'JS'中最流行的模式之一（ 'JSON' 就是基于這種語法），而它還存在于互聯網 上的幾乎所有'JS' 文件中。'對象字面量'如此流行，是因為它是一種'創建對象'的簡潔語法（否則 要多寫不少代碼）。對于開發者 來說，幸運的是'ES6'用幾種方式擴展了'對象字面量'，將這種語法變得更加強大、更加簡潔。 ~~~ <br/> >[success] ## 對象屬性簡寫 ~~~ 1. 在ES6中，當對象的一個'屬性名稱'與'本地變量名'相同時，你可以簡單書寫名稱而'省略冒號與值'。 2. 當'對象字面量'中的屬性只有名稱時，'JS'引擎會在周邊'作用域'查找'同名變量'。若找到，該變量的值將會 被賦給'對象字面量'的'同名屬性'。 ~~~ ES5 ~~~ function test (name,age){ return { name: name, age: age } } console.log(test('鳴子嘎',66)) // {name: "鳴子嘎", age: 88} ~~~ ES6 ~~~ function test (name,age){ return { name, age } } console.log(test('鳴子嘎',66)) // {name: "鳴子嘎", age: 88} ~~~ <br/> >[success] ## 對象中方法簡寫 ES5 ~~~ let person = { name: "Nicholas", sayName: function () { console.log(this.name) } } ~~~ ES6 ~~~ var person = { name: "Nicholas", sayName() { console.log(this.name) } } ~~~ <br/> >[success] ## 需計算屬性名（變量當對象的key） ~~~ 1. '需計算的屬性名'：只要用'方括號'來代替'小數點'即可。 2. '方括號'允許你將'變量'或'字符串'指定為屬性名，而在'字符串'中允許存在會導致語法錯誤的'特殊字符' ~~~ <br/> >[success] ### ES5創建計算屬性名 ~~~ 在'ES5'中無法直接在'對象'中定義'計算屬性名'，只能通過下面這種方式定義。 ~~~ ~~~ let person = {}, lastName = "last name" person["first name"] = "Nicholas" person[lastName] = "Zakas" console.log(person["first name"]) // "Nicholas" console.log(person[lastName]) // "Zakas" ~~~ <br/> >[success] ### ES6創建計算屬性名 ~~~ 'ES6'可以直接寫在對象中定義'計算屬性名' ~~~ ~~~ let lastName = "last name" let person = { "first name": "Nicholas", [lastName]: "Zakas" } console.log(person["first name"]) // "Nicholas" console.log(person[lastName]) // "Zakas" '對象'內的'方括號'表明該屬性名需要計算，其結果是一個'字符串'。這意味著其中可以包 含表達式， 像下面這樣： let suffix = " name" let person = { ["first" + suffix]: "Nicholas", ["last" + suffix]: "Zakas" } console.log(person["first name"]) // "Nicholas" console.log(person["last name"]) // "Zakas" ~~~