var expertise = 'journalism'
var journalism = {
years: 5,
interests: ['international', 'politics', 'internet']
}
var person = {
name: 'Sharon',
age: 27,
[expertise] // 这里会报语法错误
}
遇到以下情景时，可计算的属性名会让我们的代码更简洁：
某个新对象的属性引自另一个对象：
var grocery = {
id: 'bananas',
name: 'Bananas',
units: 6,
price: 10,
currency: 'USD'
}
var groceries = {
[grocery.id]: grocery
}
需构建的对象的属性名来自函数参数。如果使用ES5来处理这种问题，我们需要先声明一个对象字面量，再动态的添加属性，再返回这个对象。下面的例子中，我们创建了一个响应Ajax请求的函数，这个函数的作用在于，请求失败时，返回的对象拥有一个名为error属性及对应的描述，请求成功时，该对象拥有一个名为success属性及对应的描述。
// ES5 写法
function getEnvelope(type, description) {
var envelope = {
data: {}
}
envelope[type] = description
return envelope
}
使用ES6提供的利用计算属性名，更简洁的实现如下：
// ES6 写法
function getEnvelope(type, description) {
return {
data: {},
[type]: description
}
}
对象字面量的属性可以简写，方法其实也是可以的。
JavaScript ES6方法定义
我们先看看传统上如何定义对象方法，下述代码中，我们构建了一个事件发生器，其中的on方法用以注册事件，emit方法用以执行事件：
var emitter = {
events: {},
on: function (type, fn) {
if (this.events[type] === undefined) {
this.events[type] = []
}
this.events[type].push(fn)
},
emit: function (type, event) {
if (this.events[type] === undefined) {
return
}
this.events[type].forEach(function (fn) {
fn(event)
})
}
}
ES6 的对象字面量方法简写允许我们省略对象方法的function关键字及之后的冒号，改写后的代码如下：
var emitter = {
events: {},
on(type, fn) {
if (this.events[type] === undefined) {
this.events[type] = []
}
this.events[type].push(fn)
},
emit(type, event) {
if (this.events[type] === undefined) {
return
}
this.events[type].forEach(function (fn) {
fn(event)
})
}
}
ES6中的箭头函数可谓大名鼎鼎了，它有一些特别的优点(关于this)，可能你和我一样，使用箭头函数很久了，不过有些细节我之前却一直不了解，比如箭头函数的几种简写形式及使用注意事项。
JavaScript ES6箭头函数
JS中声明的普通函数，一般有函数名，一系列参数和函数体，如下：