ES6变量的解构赋值

ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构赋值。

1.数组的解构赋值

如下：

let [a,b,c,d] = [1,2,3,4]
a   // 1
b //2
c //3
d //4


let  [e,  [[f],  g]]  =  [1 ,  [[2],  3]];
e //1
f //2
g // 3

如果解构不成功那么变量的值就是undefined

let  [x,  y, ...z]  =  [2] ;
x //2
y //undefined
z // []

如果等号的右边不是数组，那么将会报错

let [q] = false;
let [r] = NaN;
let [s] = null;
let [t] = {}
//  false is not iterable

上面的式子都会报错，因为等号的右边的值或是转为对象以后不具备Iterator接口，或是本身就不具备Iterator接口。
对于set结构也可以使用数组的解构赋值

let  [x,  y,  z]  = new  Set(['a','b','c']);
x // "a"

事实上，只要某种数据结构具有Iteterator接口，都可以采用数组形式的解构赋值。

2.对象的解构赋值

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

let {foo,bar} = {"foo":'1',"bar":'2'}
foo // '1'
bar // '2'

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

let {baz,bas,bat} = {"bas":'234',"bat":'aaa','bar':'111'}
baz //undefined
bas //234
bat //aaa

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

var  {  x,  y  = 5} = {  x:  1 } ;
x // 1
y //5

3.字符串的解构赋值

const [a,b,c,d,e] = 'hello'
a //"h"
b // "e"
c // "l"
d // "l"
d // "o"

4.数组和布尔型的解构赋值

解构赋值时，如果等号右边是数值或者布尔值，则会先转为对象。

let  {toString :  s}  =  123 ;
s === Number.prototype.toString

let {toString:b} = true;
b === Boolean.prototype.toString

上面代码中，数值和布尔值包装对象队友toString属性，因此解构赋值都能取到值。

5.函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x,y]){return x+y;}
add([5,6])  //11

函数参数也可以使用默认值

 function test({x=1,y=2}={}){return [x,y];}
test({x:4,y:5})   // [4,5]
test({y:'6'}) // [1,"6"]
test({}) // [1,2]
test() // [1,2]