UES-05-解构

解构的作用

方便从对象或者数组等数据结构中提取想要的数据。

使用任何一种类型的解构，当 = 右边的值为 null 或 undefined 时，会抛出错误。

对象解构

通过在 = 左边使用 {}，在大括号内部写入以逗号分隔的 = 右边对象的属性名，则对应的属性名作为本地变量名，同时变量的值即为属性值。

({ name } = obj ) 的形式可以为与对象属性名称相同的变量赋予对应属性的值。表达式必须使用小括号括起来，不然出错。

以 fun({ name } = obj) 的形式解构时，传入函数的值为 obj，同时也为 name 赋值。

在解构时，如果 = 左边的变量名在右边对象中没有对应的同名属性，则会为该变量赋值 undefined，此时可以以 { name = default } = obj 形式解构，当对象中没有同名的属性或属性值为 undefined 时，该变量被赋予默认值。
以 { attr : varName = default } = obj 形式解构时，会将属性 attr 的值赋给本地变量 varName，如果该属性不存在，则本地变量使用默认值。默认值是可选的。

可以以任意深度嵌套使用解构表达式，如 { a : { b : varc }} = obj 表示从对象 obj 中找到属性 a（a 是一个对象属性），然后从属性 a 中寻找属性 b，将属性 b 赋值给变量 varc。

数组解构

以 [pos0, pos1] = arr 形式对数组解构时，按照数组中对应位置的值进行赋值。如 [ , , p2] = arr 表示将数组 arr 中第三个元素赋值给 p2，前面的逗号表示占位符。

数组解构赋值时不需要像对象解构一样需要小括号括起来，以 [var1, var2] = arr 形式即可。使用这种形式可以简单互换两个变量的值，如 [ a, b ] = [ b, a ]。

[ var1, var2 = default ] = arr 形式可以使用默认值，当数组中该位置没有值或值为 undefined 时使用默认值。

[ var1, [ var2 ]] = arr 形式可以嵌套使用数组解构。此时 var1 对应数组 arr 中第一个元素，var2 对应数组 arr 中第二个元素（这个元素是一个数组）的第一个元素。

在数组解构中，以 [var1, ...var2] = arr 的形式使用时，表示将 arr 的第一个元素赋给 var1，剩下的所有元素赋给 var2，此时 var2 表示一个数组。在这种写法中，...var2 必须是最后一个变量。

混合解构

对象解构和数组解构可以混合使用。如

// 将 obj 的 attr1 属性的 attr11 属性单独提取出来
// 将 attr3 属性的第一个元素赋给 var1。
let {
  attr1 : { attr11 },
  attr3 : [ var1 ]
} = obj;

参数解构

fun(a, b, { c, d, e }) 形式表示第三个参数是参数解构，参数里面的变量可传入也可以不传入，当不传入时，该变量的值为 undefined。如果不给第三个参数传递任何值，会抛出错误。解决这个问题的方式为：重写函数声明为：fun(a, b, { c, d, e } = {})，提供默认值。也可以写成 {c = default, d, e} 这种形式为参数提供可选的默认值。

参考

[1] Zakas, Understanding ECMAScript 6, 2017.