欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6中的数组解构赋值

程序员文章站 2022-04-01 19:21:06
es6中的数组解构赋值 解构赋值: 解构赋值语法是一个javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的...
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