变量的解构赋值

数组的解构赋值

基本用法

只要数据结构具有Iterator接口，都可以采用数据形式的解构赋值。

let [foo] = 1; 
let [foo]= false ; 
let [foo] = NaN; 
let [foo] = undefined; 
let [foo]= null; 
let [foo] = {};

以上语句都会报错，因为等号右边的值或是转为对象后不具备Iterator接口（前五个表达式），或者本身就不具备Iterator接口（最后一个表达式）。
数组的解构赋值本质上属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

  let [a,[[b],c]] = [1,[[2],3]];

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

let [foo] = [];

另一种情况是不完全解构，即等号左边的模式只匹配一部分的等号右边的数组。这种情况下解构依然可以成功。

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

默认值

解构赋值允许指定默认值。

let [x, y ='b'] = ['a']; // x=’a’, y=’b’

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

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

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到时才会求值。

function f () { 
	console.log('aaa'); 
}
let [x = f()] = [1] ;//这里f()不会执行，因为x可以取到值

默认值可以引用解构赋值的其他变量，但该变量必须己经声明。

let [ x = y , y = 1] = [ ];  // ReferenceError，因为x用到默认值y还没声明

对象的解构赋值

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

let { bar, foo } = { foo:"aaa", bar:"bbb"}; 
//foo 'aaa'
// bar 'bbb' 
let { baz } = { foo:"aaa", bar:"bbb"}; 
//baz undefined

如果变量名与属性名不 致，必须写成下面这样。

var { foo : baz } = { foo:"aaa", bar:"bbb"} ; 
// baz "aaa" 
let obj = { first:" hello", last:"world" }; 
let { first: f , last: l } =obj; 
// f 'hello' 
// l 'world' 

实际上说明 ，对象的解构赋值是下面形式的简写

let { foo : foo , bar : bar } = { foo :"aaa", bar :"bbb"}; 

也就是说，对象的解构赋值的内部机制是先找到同名属性，然后再赋值给对应的变量。真正被赋值的是后者，而不是前者。
与数组一样，解构也可以用于嵌套结构的对象。如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

let obj = {
  p: [ 
    "Hello", 
    {y : "World" } 
  ]
}
let {p: [x, { y }]} = obj; 
// x "Hello"
// y "World" 
// 这时p是模式，不是变量，因此不会被赋值。如果 也要作为变量赋值，可以写成
let {p, p: [x, {y}]}=obj;
// 下面代码会报错，原因是父对象foo 此时等于 definded ，再取子属性bar就会报错
let {foo: {bar}} = {baz :'baz'} ;

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于 undefined。

var {x = 3} = {}; 
 // x 3

如果要将一个已经声明的变量用于解构赋值，必须非常小心，必须不将大括号写在行首，避免 Javascript 将其解释为代码块

let x; 
{x} = {x :1}; //SyntaxError: syntax error，因为JavaScript将{x}理解成一个代码块，从而发生语法错误。
({x} = {x : 1}); //正确写法

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2 , 3] ; 
let { 0 : first , [arr.length - 1] : last} = arr; 
// first 1 
// last  3

字符串的解构赋值

字符串也可以解构赋值。这是因为此时字符串被转换成了一个类似数组的对象。

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

数值和布尔值的解构赋值

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

//数值和布尔值的包装对象都有toString属性，因此变量都能取到值
let {toString : s} = 123 ; 
s === Number . prototype.toString // true 
let {toString: s} = true; 
s === Boolean.prototype.toString // true
//undefined和null无法转为对象，所以对它们进行解构赋值时都会报错。
let { prop: x } = undefined; // TypeError 
let { prop: y } = null;     //  TypeError

解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于
undefined和null 无法转为对象，所以对它们进行解构赋值时都会报错。

函数参数的解构赋值

函数的参数也可以使用解构赋值。
函数参数的解构也可以使用默认值。undefinded 就会触发函数参数的默认值。

// 区分下面两种写法
function move({x, y} = { x: 0, y: 0 }} { 
  return [x, y]; 
}
move ( { x : 3 , y: 8 } ) ; //[3, 8]
move({x 3}) ;  // [3, undefined]
move({}) ; //[undefined, undefined] 
move() ; //[0, 0]

function move ({x = 0, y = 0} = {}) { 
  return [x, y]; 
}
move ({ x : 3, y : 8 }); //[3,8]
move ({ x : 3 }) ; //[3,0]
move ({}); //[0,0]
move(); //[0,0]

圆括号的问题

解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。
由此带来的问题是，如果模式中出现圆括号该怎么处理？ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。
但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此建议，只要有可能，就不要在模式中放置圆括号。

不能使用圆括号的情况

1. 变量声明语句

//全部报错，因为它们都是变量声明语句，模式不能使用圆括号。
let [(a)]= [1]; 
let {x: (c)} = {} ; 
let ( { x: c}) = {}; 
let {(x: c)} = {}; 
let {(x): c} = {}; 
let { o: ( { p: p } ) } = { o: { p: 2 } } ;

2. 函数参数

//报错
function f ([(z)]) { return z ; }

3. 赋值语句的模式

//报错
({ p: a }) = { p: 42 };

可以使用圆括号的情况

可以使用圆括号的情况只有 赋值语句的非模式部分可以使用圆括号。

[(b)] = [3] ; //赋值语句，不是声明语句；模式是取数组的第一个成员，与圆括号无关
({ p:(d)}={}) ; //赋值语句，不是声明语句；模式是p不是d
[(parseint.prop)] = [3] ; //赋值语句，不是声明语句；模式是取数组的第一个成员，与圆括号无关

用途

1. 交换变量的值
2. 从函数返回多个值时，将它们放在数组或对象里返回。利用解构赋值，取出这些值就非常方便。
3. 函数参数的定义，利用解构赋值可以方便地将一组参数与变量名对应起来，同时可以设置函数参数的默认值。
4. 提取JSON数据
5. 方便遍历Map结构。任何部署了 Iterator 接口的对象都可以用 for … of 循环遍历。 Map 结构原生支持 Iterator接口，配合变量的解构赋值获取键名和键值就非常方便。

for (let [key, value] of map) {...}
//获取键名
for (let [key] of map) {...}
//获取键值
for (let [,value] of map) {...}

6. 加载模块时，往往需要指定输入的方法。解构赋值使得输入语句非常清晰。

const {SourceMapConsumer, SourceNode} = require ("source-map");