[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" ~~~