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