JavaScript ES6中的简写语法总结与使用技巧

ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。本章我们将着重讨论这些语法糖，看完之后，可能你会对一些你很熟悉的ES6新语法有不一样的理解。

JavaScript ES6对象字面量

对象字面量是指以{}形式直接表示的对象，比如下面这样：

var book = {
 title: 'Modular ES6',
 author: 'Nicolas',
 publisher: 'O´Reilly'
}

ES6 为对象字面量的语法带来了一些改进：包括属性/方法的简洁表示，可计算的属性名等等，我们逐一来看：

JavaScript ES6中属性的简洁表示法

你有没有遇到过这种场景，一个我们声明的对象中包含若干属性，其属性值由变量表示，且变量名和属性名一样的。比如下面这样，我们想把一个名为 listeners 的数组赋值给events对象中的listeners属性，用ES5我们会这样做：

var listeners = []
function listen() {}
var events = {
 listeners: listeners,
 listen: listen
}

ES6则允许我们简写成下面这种形式：

var listeners = []
function listen() {}
var events = { listeners, listen }

怎么样，是不是感觉简洁了许多，使用对象字面量的简洁写法让我们在不影响语义的情况下减少了重复代码。

这是ES6带来的好处之一，它提供了众多更简洁，语义更清晰的语法，让我们的代码的可读性，可维护性大大提升。

可计算的属性名

对象字面量的另一个重要更新是允许你使用可计算的属性名，在ES5中我们也可以给对象添加属性名为变量的属性，一般说来，我们要按下面方法这样做，首先声明一个名为expertise的变量，然后通过person[expertise]这种形式把变量添加为对象person的属性：

var expertise = 'journalism'
var person = {
 name: 'Sharon',
 age: 27
}
person[expertise] = {
 years: 5,
 interests: ['international', 'politics', 'internet']
}

ES6 中，对象字面量可以使用计算属性名了，把任何表达式放在中括号中，表达式的运算结果将会是对应的属性名，上面的代码，用ES6可以这样写：

var expertise = 'journalism'
var person = {
 name: 'Sharon',
 age: 27,
 [expertise]: {
  years: 5,
  interests: ['international', 'politics', 'internet']
 }
}

不过需要注意的是，简写属性和计算的属性名不可同时使用。这是因为，简写属性是一种在编译阶段的就会生效的语法糖，而计算的属性名则在运行时才生效。如果你把二者混用，代码会报错。而且二者混用往往还会降低代码的可读性，所以JavaScript在语言层面上限制二者不能混用也是个好事。