【解构赋值】——数组的解构赋值方法技巧-ES6

解构赋值也是JavaScript中ES6的新语法，我们直接看实例开干！！！

很多同学都学会使用解构赋值表达式来交换变量值：

let a = 'b';
let b = 'a';

[a,b] =  [b,a];

console.log(a,b);

---

但是交换变量并不局限于两个变量，如果你需要进行排序，解构表达式就是一种选择辣。

let num1 = 30;
let num2 = 10;
let num3 = 40;
let num4 = 20;

[num1,num2,num3,num4] = [num2,num4,num1,num3];

console.log(`第一：${num1},第二：${num2},第三：${num3},第四：${num4}`);

---

如果你有一个数组，我们只需要取三个元素：

以前我们只会逐个赋值：

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

const num1  = arr[0];
const num2  = arr[1];
const num3  = arr[2];

现在我们只需要如下这样写，就会自动创建三个变量并且分别给他们进行赋值。注意，这里是按照数组里位置进行取值的。

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

const [num1,num2,num3]  = arr;

console.log(`第一名：${num1},第二名：${num2},第三名：${num3}`);

---

当然有一种情况是你只需要取里面指定位置的元素 ，这时候就可以用英语逗号来进行分割，想要哪个就哪个

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

const [,,num3,,num5]  = arr;

console.log(`第三名：${num3},第五名：${num5}`);

---

这里一个细节，如果你要进行解构赋值的那个变量名已经存在了，我们是可以进行变量值的改写，解构赋值不一定用于新创建的变量 ，还可以用于修改变量，并且要注意这里就不需要var，let或者const来声明变量了。

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

let num3 = '狗同学'；
let num5 = '猪同学'；

[,,num3,,num5]  = arr;

console.log(`第三名：${num3},第五名：${num5}`);

---

 当然数组里的某个位置可能根本就不存在，这个时候比较适合设置默认值，也就是直接在指定位置用赋值的方法把值添上就可以了。

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

let num3 = '狗同学'；
let num5 = '猪同学'；

[,,num3,,num5,,num7 = '鹿同学']  = arr;

console.log(`第三名：${num3},第五名：${num5},第七名：${num7}`);

---

不过实际上这样访问其中墨迹个数组还是比较麻烦的，我们可以把中括号改为花括号（大括号），以属性的形式来指定元素的序号，这样我们就能更轻松的定义变量了。

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

const{2:num3, 4:num5}  = arr;

console.log(`第三名：${num3},第五名：${num5}`);

---

有可能整个数组都是空的，默认值就可以自动为你进行条件判断。比如这里如果数组为空就会自动显示“数组为空”，如果数组不为空就会直接替换掉默认值 。

---

除了逐个指定来进行赋值以外，如果剩余的数组元素都需要保存起来，就可以用三个点来表示剩余的不顶元素都汇集在一个数组里面。

注意：不可以先把不定元素放前面，又在后面逐个赋值。

const arr = ['蛋同学','鸡同学','鸭同学','鹅同学','牛同学','羊同学'];

const[num1,num2,num3,...restNum]  = arr;

console.log(`第三名是：${num1},${num2},${num3},不及格的是：${restNum}`);

---

如果解构赋值的时候只有一个不定元素，那么其实就是对整个数组进行拷贝了

const arr = ['蛋同学','鸡同学','鸭同学'];

const[...copyArr]  = arr;

console.log(copyArr);

 

 我们也不需要调用concat方法来进行数组的复制了

---

我们还可以进行嵌套数组的解构：

const arr = ['蛋同学','狗同学',['鸡同学','鸭同学'],['鹅同学','牛同学','羊同学'],'鹿同学'];

const[num1,,[,num2],[,,num3]] = arr;

console.log(`第1个数组的第1个元素：${num1}，第2个数组的第2个元素：${num2}，第3个数组的第3个元素：${num3}`);