ES6中的数组解构赋值

解构赋值：

解构赋值语法是一个Javascript表达式，这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义，注意这里的定义，可以看出解构主要用在数组和对象上)。

说白了就是解析等号两边的结构，然后把右边的对应赋值给左边。如果解构不成功，变量的值就等于undefined。

一、基本的语法使用

例子1：普通数组解构赋值

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

例子2：带扩展运算符的数组解构赋值

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

例子3：变量有默认值的数组解构赋值

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

例子4：变量无默认值且解构不成功

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

二、数组解构赋值的使用场景

1、变量交换

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

2、对函数返回的数组值，进行对应赋值

//一个计算数据的函数，返回一个已知长度的数组，数组中的数据对应不同的含义
function cal(){
       //略过函数计算代码
       return [11,22]; //假设返回11代表人数，22代表总额
}
let man , price;
[man,price] = cal();
console.log(man,price); // 11  22

3、对函数返回数组，只选择性的取自己想要的数据
（逗号中无变量，那么解构的右边对应的会被忽略掉）

function cal(){
	return [1,2,3,4,5];
}
let a,b;
[a,,,b] = cal(); //5没有对应的解构，所以不会赋值
console.log(a,b); // 1  4

4、对于函数返回的未知长度的数组，只关心取第一项数据

function cal(){
	return [1,2,3,4,5];
}
let a,b;
[a,...b] = cal(); 
console.log(a); // 1