第三章 变量的解构赋值

基本用法

  ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构。
  以前为变量赋值只能直接指定值，例如

let a = 1  
let b =2 
let c = 3
ES6允许写成下面这样
let [a, b, c] = [1, 2, 3]

上面代码表示可以从数组中提取值，按照对应位置对变量赋值。
本质上这种写法属于"模式匹配"，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[]2], 3]
foo // 1
bar // 2
baz // 3

如果解构不成功就，变量的值就会等于undefined

默认值

解构赋值允许指定默认值

let [foo=true] = []
foo // true

ES6内部使用严格想等运算符（===）判断一个位置是否有值，所以一个数组成员不严格等于undefined，默认值是不会成效的。

let [x=1] = [undefined]
x // 1
let [x=1] = [null]
x // null

对象的解构赋值

  解构不仅可以用于数组，还可以用于对象

let  {foo, bar} = {foo: 'a', bar: 'b'}

对象的解构与数组有一个重要的不同，数组的元素是按次序排列的，变量的取值是由它的位置决定的，而对象的属性没有次序，变量必须与属性同名才能取到正确的值。

let  {foo, bar} = {foo: 'a', bar: 'b'}
foo // a
bar // b
let {baz} = {foo: 'a', bar: 'b'}
baz // undefined

如果变量名和属性名不一致，则必须写成这样

let {foo:baz} = {foo: 'a'}
baz  // a
实际上说明对象的解构赋值是下面形式的简写
let {foo:foo, bar:bar} = {foo:'a', bar: 'b'}

也就是说对象解构赋值的内部机制是先找到同名属性，然后再复制给对应的变量，真正被赋值的是后者，而不是前者。

let {foo:baz} = {foo:'a'}
baz // a
foo // error

上面代码中foo是匹配的模式，baz才是变量，真正被赋值的是baz，而不是foo。

let obj = {
   p: ['hello', {y: 'world'}]
}
let {p, p: {x,{y}}} = obj
x // hello
y // world
p //  ['hello', {y: 'world'}]

下面是嵌套赋值

let obj = {}
let arr = []
let {foo: obj.prop, bar: arr[0]} = {foo: 123, bar: true}
obj // {prop:123}
arr // [true]

对象的解构也可以指定默认值

let {x = 3} = {}
x // 3
let {x: y= 3} = {}
y // 3

以下两种方式会报错

let {foo: {bar}} = {baz: 'baz'}
因为foo此时为undefined，这时候再去bar属性的值就会报错
let x
{x} = {x:1}
上面写法也会报错，因为es6规定{}是一个代码块，作用域不同，造成{}中的x未定义，所以报错

总结：数组和对象的解构赋值都可以指定默认值，如果解析失败或者值为undefined，那么就取默认值。