ES6标准入门第三章：变量的解构赋值

解构赋值：从数组和对象中提取值，对变量进行赋值。

本质上，这种写法属于“匹配模式”；只要等号两边的模式相同，左边的变量就会被赋予对应的值。

1、数组的结解构赋值

基本用法

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

foo //

bar //

baz //

let[ , , third] = [1,2,3];

third //

let[head, ...tail] = [1,2,3,4];

head //

tail   // [2,3,4]

解构不成功

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

let[x,y,...z] = ['a']

x // 'a'

y // undefined      ____解构不成功，变量的值就等于undefined____

z // []             ____rest参数搭配的变量是一个数组____

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

a //

b //

d //

若等号右边为不可遍历的结构，将会报错；解构赋值适用于var、let、const命令

let [foo] = 1;　　　　　　　　 报错

var [foo] = false;　　　　　　报错

let [foo] =NaN;　　　　　　　　报错

const [foo] = undefined;　　 报错

let [foo] = null;　　　　　　　报错

let [foo] = {};　　　　　　　　报错

前五个转为对象之后不具备Iterator接口【遍历器接口】，最后一个不具备Iterator接口【遍历器接口】

只要某种数据结构具有Iterator接口，都可以采用数组的形式解构赋值。例如Set结构、Generator函数

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

x // a

function* fibs() {

   var a = 0;

   var b = 1;

   while(true) {

       yield a;

       [a, b] = [b, a+b];　　　　//[0,1] [1,1] [1,2] [2,3] [3,5] [5,8]

   }

}

var [first, second, third, three, four, five, six] = fibs();    // 数组形式的解构赋值

six //

默认值

解构赋值允许使用默认值

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

[ x, y='b' ] = [ 'a' ,undefined ];    //x='a'  y='b'

注意：ES6内部使用严格相等运算符（===）判断一个位置是否有值。数组成员严格等于undefined时，默认值生效。

var [ x=1 ] = [ undefined ];     // x=1

var [ x=1 ] = [ null ];          // x=null

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

function f() {

   console.log(111);

}

let[ x=f() ] = [1];

等价于：

let x;

if( [1][0] === undefined ) {

   x= f();

} else {

   x=[1][0];

}

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

let [ x=1, y=x ] = [];　　　　// x=1; y=1

let [ x=1, y=x ] = [ 2 ];　  //x=2; y=2

let [ x=1, y=x ] = [ 1, 2 ]; //x=1;y=2

let [ x=y, y=1 ] = [];　　　　//报错

2、对象的解构赋值

对象的解构赋值与数组的解构赋值最重要的不同： 数组元素是按顺序排列的，变量的取值由位置决定；而对象的属性没有次序，变量必须与属性同名。

var {bar, foo} = {foo:'aaa', bar:'bbb'};   // foo = aaa ; bar = bbb

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

对象解构赋值的内部机制：先找到同名的属性，然后赋值给对应的变量。真正被赋值的是后者---变量，而不是前者---模式。

var {bar, foo} = {foo:'aaa', bar:'bbb'};

等价于

var {bar:bar, foo:foo} = {foo:'aaa', bar:'bbb'};

var {foo: baz} = {foo:'aaa', bar:'bbb'};
    (模式)(变量) (属性)(属性值)            //通过模式找到同名的属性，然后将属性值赋值给对应的变量。

baz // 'aaa'

foo // foo is not defined 报错

这种写法的变量的声明和赋值是一体的；因此对于let和const，变量不能重新声明，否则会报错。

let foo;

let {foo} = {foo:1} // 报错  foo被重复声明

let baz;

let {bar: baz} = {bar: 1}  // 报错  baz被重复声明

若没有第二个let ，则不会报错；

let foo;

({foo} = {foo:1} )  //  成功

let baz;

({bar: baz} = {bar: 1})  //  成功

嵌套的对象也可以实现解构赋值

const node = {

  loc: {

    start: {

      line: 1,

      column: 5

    }

  }

};

let { loc, loc: { start }, loc: { start: { line }} } = node;

line //

loc  // Object {start: Object}

start // Object {line: 1, column: 5}

上面代码分别是对loc、start、line三个属性的解构赋值；

最后一次对line 属性的解构赋值中，只有line是变量，loc和start都是模式。。。

对象的结构也可以指定默认值；默认值生效的条件——对象的属性值严格等于（===）undefinend

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

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

var {message:msg = 'huhuh' } = {}   // msg='huhuhu'  其中message为模式

解构失败，变量的值为undefined

var {foo} = {bar:'baz'}   // foo--undefined

若将一个已声明的变量用于解构赋值，必须非常小心；

var x;

{x} = {x:1};  // 报错

以上代码报错，因为JavaScript引擎会将 { x } 理解为代码块，从而发生语法错误；只有不将大括号写在行首，避免将其解析为代码块，就能解决这个问题。

将整个解构赋值语句放在一个圆括号内，就能解决这个问题。

var x;

({x} = {x:1}); // 正常

解构赋值允许左边的模式中，不放置任何的变量名；因此可以写出非常古怪的表达式。（表达式没有意义，但是能够正常执行）

({} = [true, false]);

({} = 'abc');

({} = []);

对象的解构赋值能将现有对象的方法，赋值到某个变量；

let { log, sin, cos } = Math;

将Math对象的对数、正弦、余弦三个方法赋值到对应的变量上，使用起来方便

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

let arr = [1,2,3];

let { 0: first, [arr.length-1]:last } = arr;    //其中方括号这种写法属于“属性名表达式”

first //

last  //

3、字符串的解构赋值

因为字符串可以被转换为一个类似数组的对象，所以字符串也可以进行解构赋值

const [a,b,c,d,e] = 'hello';

a // h

b // e

c // l

d // l

e // o

类数组对象都有length属性，因此还可以对这个属性进行解构赋值

let {length : len} = 'hello';          等价于 {length : length} = {length : 5 , //还有其他的属性 ， ……}

len // 5

4、数值和布尔值的解构赋值

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

let {toString: s} = ;

s === Number.prototype.toString  // true

let {toString: s} = true;

s === Boolean.prototype.toString  // true

因为数值和布尔值的包装对象都有toString 属性，因此s 能够取到值。

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

let {prop: x} = undefined;          // 报错

let  {prop: y} = null;              // 报错

5、函数参数的解构赋值

函数add的参数表面上是一个数组，但是在传入的那一刻，数组参数就被解构为变量x 和 y。函数内部接收到的就是变量x 和 y。

function add([x, y]) {

   return x+y;

}

add([, ]);

[[1,2],[3,4]].map( ([a,b]) => a+b );  //[3,7]

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

以下函数为变量x、y指定默认值。

function move( {x=0,y=0} = {} ) {                 等价于 -- {x:x=0, y:y=0} = {}

   return [x, y];

}

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

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

move( {} );                 // [0,0]                 {x:x=0, y:y=0} = {}

move();                     // [0,0]　　　　　　　　　　 没有结构成功的情况下，x y 等于默认值！！

函数move 的参数是一个对象，通过对这个对象进行解构得到变量x 和 y 的值；若解构失败，则x 和 y等于默认值。

function move( {x, y} = { x:0, y:0 } ) {        等价于 -- {x:x, y:y} = {}

   return [x, y];

}

move( {x:3, y:8} );    　　  // [3,8]

move( {x:3 );               // [3,undefined]             {x:x, y:y} = {x:3, y:undefined}

move( {} );                 // [undefined,undefined]     {x:x, y:y} = {x:undefined, y:undefined}

move();                     // [0,0]                     {x:x, y:y} = {x:0, y:0}  函数不传参的情况下，参数的默认值才生效

以上代码是为函数move的参数指定默认值，而不是为变量x、y指定默认值。

undefined会触发函数参数的默认值。

[1,undefined,3].map( (x='yes') => x )     // [1,yes,3]

6、圆括号的问题

解构赋值虽然很方便，但是解析并不容易；对于编译器来说，一个式子是模式还是表达式，只有解析到（解析不到）等号才知道。

ES6中对于圆括号的规定：只要可能导致结构歧义，就不得使用圆括号。---- 只要有可能就不要在模式中放置圆括号。

不能使用圆括号的三种情况：

（1）变量声明语句中，模式不能带有圆括号。

var [(a)] = [1];

let {x: (c)} = {};

let ({x: c}) = {};

let {(x: c)} = {};

let {(x): c} = {};

var { o: ({p:p}) } = { o:{p:2} }

//以上全部报错，因为他们都是变量声明语句，模式不能带有圆括号

（2）函数参数中，模式不能带有圆括号。 ---- 函数参数也属于变量声明

function f( [(z)] ) { return z; }

（3）不能将整个模式或者嵌套模式中的一层放在圆括号中。

( {p: a} ) = { p: 23 }

( [a] ) = [5]

// 以上整个模式放入括号，导致全部报错

[ ({p: a}), {x: c} ] = [{}, {}]

// 嵌套模式中的一层放入括号， 导致报错

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

[ (b) ] = [3];             // 此语句模式是取数组的第一个元素，与圆括号无关

( { p: (d) } = {} );　　　　// 此语句模式是p

[ (parseInt.prop) ] = [3];

//以上语句都可以正常执行， （1）他们是赋值语句； （2）他们的圆括号都不属于模式的一部分；

7、解构赋值的用途

（1）交换变量的值

[x, y] = [y, x]

（2）取出函数返回的多个值

函数只能返回一个值，若要返回多个值，只能将其放在数组或者对象中返回。

function example() {

   return [1,2,3];

}

var [a,b,c] = example();

（3）函数参数的定义

解构赋值方便的将一组参数与变量名对应起来

function f( [x, y ,z] ) { .... }

f( [1,2,3] )               //有序

function f( {x, y, z} ) { .... }

f( {z:3, y:2, x:1} )       // 无序

（4）提取JSON数据

var jsonData = {

   id: 23,

   status: "ok",

   data: [111, 222]

}

let { id, status, data:number } = jsonData;

id //

status // ok

number // [111, 222]

（5）函数参数默认值

（6）遍历Map结构

任何部署了Iterator接口的对象，都可以用for..of..循环遍历。

var map = new Map();

map.set('first', 'hello');

map.ser('second, 'world');

for(let [key, value] of map) {

   console.log('key' is 'value');

}

// first is hello

// second is world

（7）输入模块的指定方法

加载模块时，往往需要指定输入哪些方法，解构赋值使输入非常的清晰。

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