ES6 - 变量的解构赋值解析

• ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
• 如果解构不成功，变量的值就等于undefined。

数组的解构赋值

例子：

let [temA, temB, temC] = ['AAAA', 'BBBB', 'CCCC']
console.log(temA); // AAAA
console.log(temB); // BBBB
console.log(temC); // CCCC

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上这种写法属于‘模式匹配‘，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面看些复杂的例子：

let [temA, [temB, temC], temD] = ['AAAA', ['BBBB', 'CCCC'], 'DDDD'];
console.log(temA); // AAAA
console.log(temB); // BBBB
console.log(temC); // CCCC
console.log(temD); // DDDD

let [ , , temA] = ['AAAA', 'BBBB', 'CCCC'];
console.log(temA); // CCCC

let [temA, temB, temC] = ['AAAA'];
console.log(temC); // undefined

解构一般有三种情况，1.完全解构；2.不完全解构；3.解构不成功。

在上述例子中存在完全解构和解构不成功的例子，下面来看一下不完全解构的例子

let [temA, temB] = ['AAAA', 'BBBB', 'CCCC'];
console.log(temA); // AAAA
console.log(temB); // BBBB

let [temA, [temB], temD] = ['AAAA', ['BBBB','CCCC'], 'DDDD'];
console.log(temA); // AAAA
console.log(temB); // BBBB
console.log(temD); // DDDD

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

如果等号的右边不是数组，或者说不是可遍历的结构，那么将会报错，看下面的例子

let [temA] = 1;
let [temB] = false;
let [temC] = NaN;
let [temD] = undefined;
let [temE] = null;
let [temF] = {};

上面的语句都会报错：Uncaught TypeError: undefined is not a function

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

let [temA, temB = 'bbbb'] = ['AAAA'];
console.log(temB); // bbbb

let [temA, temB = 'bbbb'] = ['AAAA', undefined];
console.log(temB); // bbbb
        
let [temA, temB = 'bbbb'] = ['AAAA', null];
console.log(temB); // null

数组成员为undefined时，默认值仍会生效；如果一个数组成员是null,默认值就不会生效，因为null不严格等于undefined。

对象的解构赋值

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

let {temA, temB} = {temA: 'AAAA', temB: 'BBBB'};
console.log(temA); // AAAA
console.log(temB); // BBBB
// 上面例子与下面例子等同
let {temA: temA, temB: temB} = {temA: 'AAAA', temB: 'BBBB'};
console.log(temA); // AAAA
console.log(temB); // BBBB

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

如果变量名和属性名不一致，必须写成下面例子这样

let {temA: temG} = {temA: 'AAAA', temB: 'BBBB'}
console.log(temG); // AAAA

let obj = {temA: 'AAAA', temB: 'BBBB'};
let {temA: A, temB: B} = obj;
console.log(A); // AAAA
console.log(B); // BBBB

与数组一样，解构也可以用于嵌套解构的对象，看下面例子

let obj = {
    data: [
        'temA',
        {temB: 'BBBB'}
    ]
};
let {data: [temA, {temB}]} = obj;
console.log(temA); // temA
console.log(temB); // BBBB

const node = {
    res: {
        parent: {
            num: 1,
            content: 'Content'
        }
    }
}

let {res, res: {parent}, res: {parent: {num}}} = node;
console.log(res); // Object {parent: Object}
console.log(parent); // Object {num: 1, content: "Content"}
console.log(num); // 1

上面代码有三次解构赋值，分别是对res、parent、num三个属性的解构赋值。

如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

let {node: {temA}} = {temB: 'temC'};
// Uncaught TypeError: Cannot match against 'undefined' or 'null'.

• 对象的解构也能制定默认值

var {temA = 'AAAA'} = {};
console.log(temA); // AAAA
        
var {temA, temB = 'BBBB'} = {temA: 'AAAA'};
console.log(temA); // AAAA
console.log(temB); // BBBB
        
var {temA: temB = 'BBBB'} = {};
console.log(temB); // BBBB
        
var {temA: temB = 'BBBB'} = {temA: 'AAAA'};
console.log(temB); // AAAA

字符串的解构赋值

字符串也可以解构赋值，在解构赋值时会被转换成类似的数组对象。其中还有一个length属性，因此还可以对这个属性解构赋值。

const [temA, temB, temC, temD, temE] = 'world';
console.log(temA); // w
console.log(temB); // o
console.log(temC); // r
console.log(temD); // l
console.log(temE); // d
        
let {length: len} = 'world';
console.log(len); // 5

数值的解构赋值

数值在解构赋值时，会先转为对象。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。

let {temA: temB} = 123;
console.log(temB === Number.prototype.temA);

布尔值的解构赋值

布尔值在解构赋值时会和数值一样，先转为对象。

let {temA: temB} = true;
console.log(temB === Number.prototype.temA);

函数参数的解构赋值

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

function add([argA, argB]){
    return argA + argB;
}

console.log(add([1, 2])); // 3

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

function add([argA, argB = 5]){
    return argA + argB;
}
console.log(add([1])); // 6

function add({argA, argB = 5} = {}){
    return argA + argB;
}
console.log(add({argA: 1})); // 6

变量解构赋值的用途

1. 交换变量的值

let temA = 'AAAA';
let temB = 'BBBB';
[temA, temB] = [temB, temA];
console.log(temA); // BBBB
console.log(temB); // AAAA

1. 从函数返回多个值

function Fn(){
    return [1, 2, 3];
}
let [temA, temB, temC] = Fn();
// 返回一个数组
        
function Fn(){
    return {
        temA: 'AAAA',
        temB: 'BBBB'
    }
}
let {temA, temB} = Fn();
// 返回一个对象

1. 函数参数的定义

function Fn([temA, temB, temC]){
    console.log(temA + temB + temC);
}
Fn([1, 2, 3]);

1. 提取JSON数据

let jsonData = {
    id: 1,
    name: 'Xiao Duan',
    data: [22, 99]
}

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

console.log(id, name, number); // 1 "Xiao Duan" [22, 99]
        

1. 函数参数的默认值

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

1. 遍历Map结构

const map = new Map();
map.set('temA', 'hello');
map.set('temB', 'world');
for (let [key, value] of map){
    console.log(key + " is " + value);
}

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

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