20.JavaScript-数组解构赋值

1.什么是解构赋值

解构赋值是ES6中新增的一种赋值方式

let arr = [1, 3, 5];
let [a, b, c] = arr;
console.log("a=" + a);  // a=1
console.log("b=" + b);  // b=3
console.log("c=" + c);  // c=5

2.数组解构赋值注意点

2.1 在数组的解构赋值中，等号左边的格式必须和等号右边的格式一模一样，才能完全结构

let [a, b, [c, d]] = [1, 3, [2, 4]];
console.log("a=" + a);
console.log("b=" + b);
console.log("c=" + c);
console.log("d=" + d);

2.2 在数组的解构赋值中，左边的个数可以和右边的个数不一样，左边有几个就解构几个

let [a, b] = [1, 3, 5];
console.log("a=" + a);  // a=1
console.log("b=" + b);  // b=3

2.3 在数组的解构赋值中，右边的个数可以和左边的个数不一样，右边有几个就解构几个，没有的就赋值undefined

let [a, b, c] = [1];
console.log("a=" + a); // 1
console.log("b=" + b); // undefined
console.log("c=" + c); // indefined

2.4 在数组的解构赋值中，如果右边的个数和左边的个数不一样，那么我们可以给左边指定默认值

let [a, b = 666, c=777] = [1];
console.log("a=" + a); // a=1
console.log("b=" + b); // b=666
console.log("c=" + c); // c=777

2.5 在数组的解构赋值中，如果左边的个数和右边的个数不一样，那么如果设置默认值会被覆盖

let [a, b = 666] = [1, 3, 5];
console.log("a=" + a); // a=1
console.log("b=" + b); // b=3

2.6 在数组的解构赋值中，还可以使用ES6中新增的扩展运算符来打包剩余的数据(剩余数据以数组形式返回)
2.7 在数组的解构赋值中，如果使用了扩展运算符，那么扩展运算符只能写在最后定义的变量前面

let [a, ...b] = [1, 3, 5];
console.log("a=" + a); // a=1
console.log(b); // b=[3,5]