ES6解构赋值之数组的解构赋值

解构赋值

<一>解构赋值是一个JavaScript表达式这使得可以将值从数组，或者属性从对象提取到不同的变量中。 ----MDN
<二>下面是菜鸟教程上的解释

1. 解构赋值是对赋值运算符的扩展。
2. 他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
3. 在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

下面是整理的一些数组的解构赋值相关内容

1. 简单的解构赋值

语法const[ ] = [ ];
等号左边的数组里是要赋值的变量，右边的数组是要进行解构的数组，下面上代码吧
const arr = [1,2,3,4];
let [a,b,c,d] = arr;
这时候的a = 1; b=2; c=3; d= 4;

2. 更复杂的解构赋值

如果我们像下面这行代码一样定义一个更加复杂的数组我们又该如何拿到相对应的数据呢

const arr = ['a','b',['c','d',['e','f','g']]];

这是我们可以记住下面几点，即

1. 可嵌套
2. 可忽略
3. 不完全解构
4. 剩余运算符
5. 默认值

比如我们要在上个数组中拿到b，我们可以这样来操作

const arr = ['a','b',['c','d',['e','f','g']]];
const [,b] = arr;

我们在上个数组中拿到g，我们可以这样来操作

const arr = ['a','b',['c','d',['e','f','g']]];
const [,,[,,[,,g]]]=arr;

剩余运算符，下面这段代码就用到了剩余运算符，又叫扩展运算符
这里要注意的是，剩余的元素会按照原有的顺序以数组的形式连接在一起
运算符必须放在最后，否则就会报错

const arr = ['a','b',['c','d',['e','f','g']]];
const [a,...b] = arr;

运算结果，这时候的b

关于解构默认值
1.当我们对数组进行解构赋值时，如果变量的个数多于原数组元素的个数，则多出的变量则直接被复制为undefined
2.当变量对应的值是undfined时可以重新定义默认值
例如
const arr = [1, undefined, undefined];
const [a, b = 2, c, d=“aaa”] = arr;
这时候a，b，c，d对应的就是1，2，undefined，“aaa”;

不完全解构

let [a = 1, b] = []; // a = 1, b = undefined