ES6数组解构赋值的方法与运用

159 阅读2分钟

解构赋值是什么?

让我们先来看一个问题:这是一个数组

const arr = [1,2,3];

我们如何把数组中的数值提取出来呢?

在ES6之前我们往往用数组下标的方式来实现,比如:

const a = arr[0];
const a = arr[1];
const a = arr[2];

这个方法很简单但也很繁琐;

................................................................................................................................

ES6解构赋值就能较好的解决这个问题。

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

这样数组里的数值就被赋值给abc了,

那么解构赋值是什么?

解析某一数据的结构,将需要的数据提取 并赋值给变量或常量;

  1. 数组 解构赋值的要求
  • 模式或结构需要匹配:当等号的右边是数组 左边也要相应的为数组结构。

  • 索引值相同的完成赋值:赋值的顺序按照数组排列顺序;

  • 不取值的可以使用逗号直接跳过;

  2.数组 解构赋值的默认值

const [a=1,b=2]=[];

数组 解构赋值的默认值,在左边的数组给a b直接赋值就可以了

  • 生效条件:只有当一个数组成员严格等于(===)underfunded时,默认值才会生效

  • 同时,如果默认值为表达式,表达式是惰性求值的,如果默认值没有被启用,表达式根本不会执行。

3.数组解构赋值的运用

1.arguments

arguments是一个对应于传递给函数的参数的类数组对象。

但它终究是类数组,没有数组的方法。

所以我们可以利用解构赋值,将arguments的值,转移到一个真正的数组上来

const [a,b] = arguments;

2.NodeList

当我们使用querySelectorAll(),返回的标签也会成为一个叫NodeList的类数组。

同样的可以利用解构赋值,将NodeList 的值,转移到一个真正的数组上来

3.交换变量的值

[x,y]=[y,x];

直接使用解构赋值就可以实现,不需要借助第三个值。