ES6常用新特性学习3-解构赋值
ES6常用新特性学习3-解构赋值
1. 简介
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。它提供了一种更加方便的数据访问方法，对于代码简化有很大的作用，也是使用非常频繁的新特性。
2. 数组的解构赋值
2.1 基本用法
以前，想要提取数组中的值赋值给相应变量，需要每一次进行单独赋值。像下面这样：
let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c); // 1 2 3现在我们有了更方便的写法：
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
2.2 嵌套解构
上面说过，本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。所以可以使用嵌套数组进行解构。
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]2.3 对等号右边值的要求
在进行对数组的解构赋值时，等号右边必须是可遍历的结构，比如说数组，Set集合，甚至Generator对象。否则会报错。
字符串在解构时会被转化成一个类似数组的对象，因此可以用于数组的解构赋值
let [a, b, c, d, e] = 'hello';2.4 不完全解构
如果等号左右边的变量与值的个数不相等，就会发生部分解构。如：
// 右边多余的部分会被舍弃
let [a, b] = [1, 2, 3];
console.log(a, b); // 1 2
// 左边多余的部分会被赋值为undefined
let [x, y] = [1];
console.log(x, y); // 1 undefined2.5 默认值
解构赋值允许指定默认值。当左边的变量解构时被赋值为undefined时将使用指定的默认值。
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'但是需要注意的是，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。
let [x, y = 'b'] = ['a', null]; // x='a', y=null因为null不严格等于undefined，所以变量默认值不生效，而是被赋值成为了nul。
3. 对象的解构赋值
3.1 基本用法
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。如下：
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"那么，难道我们解构出来的变量必须只能和对象的属性同名吗？并不是的，看下面这个例子：
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"其实，解构的完整写法就是如上例所示：
{属性名:变量名,...}={属性名:值,...}真正被赋值的其实是变量名，我们只要保证该变量名的key是和对应的需要解构的属性名相同即可。而当属性名与变量名相同时，我们可以简写为：
{变量名,...}={属性名:值,...}3.2 嵌套解构
与数组一样，解构也可以用于嵌套结构的对象。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]下面是一个更复杂的嵌套解构：
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}上面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。
其实，从上面两个例子可以看出，左边对应的模式到了第几层，解构时的赋值就是到第几层。一切还是那句话，解构是模式的匹配。
3.3 对等号右边值的要求
使用对象解构赋值时，右值可以是简单数据类型布尔、字串或者数字。解构时，会先将其转化为对象，再进行解构。
右值不可以是不能转成对象的null或undefined，因为它们没有对应的包装类。
3.4 不完全解构
如果等号左右边的变量与值的个数不相等，就会发生部分解构。如：
// 右边多余的部分会被舍弃
let {a, b} = {a:1, b:2, c:3};
console.log(a, b); // 1 2
// 左边多余的部分会被赋值为undefined
let {c, d} = {c:1};
console.log(c, d); // 1 undefined3.5 默认值
let {a, b =2 } = {a:1};
console.log(a, b); // 1 2同样需要注意，只有赋值以后严格等于undefined时，默认值才会生效。
4. 用途
变量的解构赋值用途很多。
- 交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
- 从函数返回多个值
函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();- 函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});- 提取 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 数据的值。
- 函数参数的默认值
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';这样的语句。
- 遍历 Map 结构
任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
const map = new Map();
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");