ES6之变量的解构赋值

1 概述

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

举个例子就能明白上面的概念：

let a = 1;
let b = 2;
let c = 3;

//ES6允许写为：
let [a, b, c] = [1, 2, 3];

注：ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（简称ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2 基本数据类型变量的解构赋值

2.1 数组的解构赋值

数组结构的前提条件是等号左右两边都为数组。数组的元素是按次序排列的，变量的取值由它的位置决定。

注：若等号右边不是数组，则无法为数组赋值，结果会报错。

let [foo, [[bar], baz]] = [1, [[2], 3]]; //foo为1，bar为2，baz为3
let [ , , third] = ["foo", "bar", "baz"]; // third为"baz"
let [x, , y] = [1, 2, 3]; //x为1，y为3
let [head, ...tail] = [1, 2, 3, 4]; //head为1，tail为[2,3,4]
//若结构不成功，则为undefined，如下所示的变量y
let [x, y, ...z] = ['a'];//x为"a"，y为undefined，z为[](即空数组)

若等号右边的值比左边的变量多，则为不完全结构，即即等号左边的模式，只匹配一部分的等号右边的数组。举例如下：

let [x, y] = [1, 2, 3]; //x为1，y为2，数值3为多余的
let [a, [b], d] = [1, [2, 3], 4]; //a为1，b为2，d为4,数值是多余的

解构赋值允许执行默认值：由于ES6内部使用的是严格相等运算符，只有一个数组成员严格等于undefined时，默认值才会生效，即没有匹配到时为undefined。

let [foo = true] = []; // foo为true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined]; //x为1
let [x = 1, y = x] = [];  // x=1，y=1
let [x = 1, y = x] = [2]; // x=2，y=2

若匹配到的值不是为undefined，则默认值不会生效。

let [x = 1] = [null]; //x为null
let [x = 1, y = x] = [1, 2]; // x=1，`在这里插入代码片`y=2

function f() {
  console.log('aaa');
}

let [x = f()] = [1]; //x为1，默认值不生效，则函数f不会执行

等号右侧为Set结构或Generator函数也可以使用数组的解构赋值。

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

//fibs为Generator函数
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
// first为0，second为1，third为1，fourth为2，fifth为3，sixth为5

2.2 对象的解构赋值

对象的属性没有次序，因此变量必须与属性同名，才能取到正确的值（若结构失败则值为undefined）。举例如下：

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

我们可以将对象的方法赋值给某个变量：例如将Math.abs方法赋值给对象的变量abs，则使用起来就会方便很多🤔。

let { abs } = Math;
abs(-6); // 6

对象的属性值也可以进行解构赋值：下面的例子中，foo、first、last为匹配的模式，而属性值才为变量，被赋值的为属性值。

let { foo: baz } = { foo: 'aaa' }; // baz为"aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj; // f为"hello"，l为"world"

如下例子：嵌套结构的对象

let obj = {
  p: [
    'hello',
    { y: 'world' }
  ]
};

let { p: [x, { y }] } = obj; // x为"hello"，y为"world"，p为匹配模式

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p, p: [x, { y }] } = obj; 
// x为"hello"，y为"world"，p为["Hello", {y: "World"}]，这里的p为变量

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
//obj为{prop: 123}，arr为[true]

对象的解构赋值可以取到继承的属性：

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
const { foo } = obj1; //foo的值为"bar"

同数组的解构赋值一样，对象在解构赋值时默认值生效的条件是：对象的属性值严格等于undefined。

let {x = 3} = {x: undefined}; // x为3
let {x = 3} = {x: null}; // x为null

再来看一个特殊的例子：则first为1，last为3。
分析：数组也是对象，下面的arr等同于：arr={0: 1, 1: 2, 2: 3}，而[arr.length-1]即[2]，键2对应的值为3。

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

2.3 字符串的解构赋值

直接举例：字符串会被转换为一个类似数组的对象。

const [a, b, c, d, e] = 'hello'; //a为"h"，b为"e"，c为"l"，d为"l"，e为"o"，
let {length : len} = 'hello'; //由于字符串有length属性，显然len为5

2.4 数值与布尔值的解构赋值

等号右边的数值与布尔值在解构赋值时，都会转为对象：

let {toString: n} = 123;
n === Number.prototype.toString //true

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

注：undefined和null无法进行解构赋值。

2.5 函数参数的解构赋值

直接举例：

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

同样地，函数的参数也可以使用默认值，即严格等于undefined时，默认值才生效。

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

3 解构赋值的用途

1. 交换变量的值：

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

2. 从函数返回多个值：

   // 返回一个数组
   function example() {
   	return [1, 2, 3];
   }
   let [a, b, c] = example();
   
   // 返回一个对象
   function example() {
   	return {
   	  foo: 1,
   	  bar: 2
   	};
   }
   let { foo, bar } = 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数据

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

5. 遍历Map结构

   const map = new Map();
   map.set('first', 'hello');
   map.set('second', 'world');
   
   //获取键名和键值
   for (let [key, value] of map) {
     //直接就拿出key和value的值了
   }
   // 获取键名
   for (let [key] of map) {
     // ...
   }
   // 获取键值
   for (let [,value] of map) {
     // ...
   }
   

6. 输入模块的指定方法

   const { 方法1, 方法2, ... } = require("模块名");