ES6：解构赋值

解构赋值可以看做是 通过一定的模式，从数组或对象等获取值并赋值给其他变量，这可以称为解构赋值。

数组解构

通常情况下我们从数组中提取赋值是这样的：

const arr = [1,2,3];
let a = arr[0]
let b = arr[1]
let c = arr[2]

现在使用解构可以让写法更加的简约，解构赋值模拟了数组值的获取和变量赋值。

 let [a,,b,c] = [a,b,c]

事实上，解构赋值时一种模式匹配机制，只要两边的模式一致，解构赋值就会成功。

let [a,[[b],c]] = [1,[[2],3]];
console.log(a,b,c);

let [,,c] = [1,2,3];
console.log(c); //3

let [a,,b] = [1,2,3];
console.log(a,b); //1 , 3

let [n1,...n2] = [5,4,12,23,1,2];
console.log(n1,n2); // 5 , [ 4, 12, 23, 1, 2 ]

解构失败和解构不完全

解构失败可以看做是需要被赋值的变量没有被赋值

let [a,c] = [1];
console.log(c);  //undefined

解构不完全指的是 被解构的数据没有被完全匹配

let [a,c] = [1,2,3]; // 数组的第三个元素就没有被解构

如果解构式的右侧是不可遍历的结构，则将会报错

let [a] =  1;
let [b] = false;

默认值

当数组解构不成功时，我们可以为其设置默认值

let [a,b,c=3] = [1,2];
console.log(c); //3

解构赋值的默认值是当解构赋值变量的值为undefined时，会为变量设置默认值（包括解构不成功，或者赋值本身的值就为undefined）；

let [a,b=2,c=3] = [1,undefined];
console.log(b,c); // 2 3

对象解构

对象解构与数组解构有些相似，但是有个主要的不同是：数组的模式匹配是按照数组的位置进行匹配的，但是对象是无序的，匹配是靠属性名对应。

let {a,c,b} = {a:1,b:function(){}}
console.log(a,c,b);  //1 , undefined, function(){}

与数组解构一致，存在解构失败和解构不完全的情况，解构失败时也可以默认值。

---

如果赋值的变量名与属性不一致，可以用下面的写法

let {a: n1,b:n2} = {a:1,b:function(){}}

可以看做是先找到相应的属性名，然后取得值之后对变量赋值。

---

复杂结构的解构赋值 数组中嵌套对象或者对象中嵌套数组 也可以使用恰当的模式匹配进行解构赋值。

let [{a,d:{b}},c] = [{a:1,d:{b:2}},3]
console.log(a,b,c);

注意一下结构中的d不是需要赋值的变量，而是匹配模式的属性，输出d时将会报错（d is not defined）。

字符串解构

字符串也可以被解构，因为字符串解构时会被转化为类似数组的对象

const [a,b,c,d] = 'abcd';
console.log(a,b,c,d); // 'a','b','c','d'

函数参数的解构赋值

函数的参数解构赋值本质上与其他类型的解构赋值没多大差别，也支持默认值和嵌套解构，可以参照上面的内容。

function test([x,y],{z,a},{t=1,v=2}){
    console.log(x,y,z,a,t,v);
    
}
test([1,2],[3,4],[]) // 1 2 undefined undefined 1 2

解构赋值的常见用法

1. 交换变量的值

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

方法简洁，清晰明了

2. 从函数返回值中取值

如果函数返回多个值，可以先放置在对象中保存返回，然后解构赋值去获取

function test(){

    return {
        x:1,
        y:2
    }
}
const {x,y} = test()

3. 函数参数的定义

定义函数时，使用解构赋值可以明确参数的数据结构

// 参数是一个数组
function test([x,,y,z,c]){

};
te;

// 参数是一个对象
function test({x,y,z,c}){
    
};
test({x:1,y:2,z:3,z:4});

4. 函数参数的默认值

可以直接指定函数的默认值，这就不需要按之前一样在函数里面写 或运算赋值语句（const a = arg1.a || 1）。

function test({
    a = 1,
    b = 2,
    c = 3,
    d = 4
} = {}){
    
}

test()

5. 加载模块的指定方法

import { method1,method2}  from 'a.js'