ES2015：解构赋值

解构赋值是ES2015的新语法，可以看作是有一个语法糖；它允许您使用类似于数组构建的方式将数组或对象的属性赋值给变量。这个语法非常简单，仍不失清晰的语意表达。

解构数组

如果没有解构赋值，你可能会像这样访问数组中的前三项：

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

通过解构赋值，代码可以编程这样：

var [first, second, third] = someArray;

甚至还可以这样嵌套：

var [foo, [[bar], baz]] = [1, [[2], 3]];

解构对象

在对象上进行解构可以将变量绑定到对象的不同属性。先指定要绑定的属性，然后指定要绑定其值的变量。相比解构数组，我觉得解构对象更为强大和有用。

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);// "lorem"
console.log(bar);// "ipsum"

注意： 这里是用的命名约定，把属性值赋给相同名称的变量；这里也可以指定所赋值的属性名，但是看起来就不简洁了，这里就不再啰嗦。

应用场景

这种解构语法最适合的应用场景就是接受传入参数，对比一下是不是舒服多了？

ES5语法

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? {x: 0, y: 0} : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: {x: 18, y: 30},
  radius: 30});

ES2015语法

function drawES2015Chart(
  {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}

drawES2015Chart({
  cords: {x: 18, y: 30},
  radius: 30});