解构赋值是什么?
让我们先来看一个问题:这是一个数组
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了,
那么解构赋值是什么?
解析某一数据的结构,将需要的数据提取 并赋值给变量或常量;
- 数组 解构赋值的要求
-
模式或结构需要匹配:当等号的右边是数组 左边也要相应的为数组结构。
-
索引值相同的完成赋值:赋值的顺序按照数组排列顺序;
-
不取值的可以使用逗号直接跳过;
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];
直接使用解构赋值就可以实现,不需要借助第三个值。