Es6总结，变量的解构赋值篇

Es6总结，变量的解构赋值篇

1，数组的解构赋值

Es6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为解构（模式匹配：只要等号两边的模式相同，左边的变量就会被赋予对应的值。）

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

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

ES6 内部使用严格相等运算符（===），只有当一个数组成员严格等于undefined，默认值才会生效。

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

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

2，对象的解构赋值

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

如果解构失败，变量的值等于undefined。

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

let{foo: baz }={foo:'aaa',bar:'bbb'};
baz // "aaa"
foo // error: foo is not defined

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

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

注意：

1. 如果要将一个已经声明的变量用于解构赋值，必须非常小心。

// 错误的写法
let x;{x}={x:1};
// SyntaxError: syntax error

只有不将大括号写在行首，避免 JavaScript 将其解释为代码块

// 正确的写法
let x;
({x}={x:1});

2. 解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。

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

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

上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。

3，字符串的解构赋值

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

let{length: len}='hello';
len // 5

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

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

let{toString: s}=123;
s ===Number.prototype.toString // truelet{toString: s}=true;
s ===Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

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

let{prop: x }=undefined;// TypeError
let{prop: y }=null;// TypeError

5，函数参数的解构赋值

functionadd([x, y]){
return x + y;
}
add([1,2]);// 3

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

6，圆括号问题

解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。

由此带来的问题是，如果模式中出现圆括号怎么处理。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）函数参数

函数参数也属于变量声明，因此不能带有圆括号。

// 报错
functionf([(z)]){return z;}
// 报错
functionf([z,(x)]){return x;}

（3）赋值语句的模式

// 全部报错
({p: a })={p:42};
([a])=[5];

上面代码将整个模式放在圆括号之中，导致报错。

// 报错
[({p: a }),{x: c }]=[{},{}];

上面代码将一部分模式放在圆括号之中，导致报错。

可以使用圆括号的情况

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

[(b)]=[3];// 正确({p:(d)}={});// 正确[(parseInt.prop)]=[3];// 正确

上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。

7，用途

变量的解构赋值用途很多。

（1）交换变量的值

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

（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组
function example(){
    return[1,2,3];
}
let[a, b, c]=example();
// 返回一个对象
functionexample(){
    return{
        foo:1,
        bar:2
    };
}
let{ foo, bar }=example();

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值
functionf([x, y, z]){...}
f([1,2,3]);
// 参数是一组无次序的值
functionf({x, y, z}){...}
f({z:3,y:2,x:1});

（4）提取 JSON 数据

解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData ={
    id:42,
    status:"OK",
    data:[867,5309]
};
let{ id, status,data: number }= jsonData;

console.log(id, status, number);// 42, "OK", [867, 5309]

上面代码可以快速提取 JSON 数据的值。

（5）函数参数的默认值

jQuery.ajax=function(url,{
  async =true,beforeSend=function(){},
  cache =true,complete=function(){},
  crossDomain =false,
  global =true,// ... more config}={}){// ... do stuff};

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

（6）遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

const map =newMap();
map.set('first','hello');
map.set('second','world');
for(let[key, value]of map){
  console.log(key +" is "+ value);
}// first is hello// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

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

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

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

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