js 数组解构赋值

Es6中新增了对数组拆分并且赋值的方法——解构赋值

例子:

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

等式左边的[a,b,c]和右边的数组的元素相互对应,a->arr[0],b->arr[1],c->arr[3],可以通过解构的方式来把数组中的元素拆分并且赋值给创建好的变量。

数组解构赋值的特点

  1. 等式左边的变量个可以超过右边数组中的元素个数,左边多余的变量会被赋值为undefined
let [a, b, c] = [1,2];
console.log("a = " + a);// 1
console.log("b = " + b);// 2
console.log("c = " + c);// undefined
  1. 等式左边的变量个数可以小于右边数组中的元素个数

let [a, b] = [1,2,3]
console.log("a = " + a); //a = 1
console.log("b = " + b); //b = 2
  1. 左边变量个数小于右边数组元素个数时,左边的等式若是设置了默认值,则会被覆盖
let [a, b = 9999] = [1, 2, 3];
console.log("a = " + a);// a = 1
console.log("b = " + b);// b = 2

4.左边变量个数大于右边数组元素个数时,我们可以给左边变量指定默认值

let [a, b = 2, c = 3] = [1];
console.log("a = " + a);// a = 1
console.log("b = " + b);// b = 2
console.log("c = " + c);// c = 3
  1. 等式左边的格式要与右边的数组一致,才能正常解构

例如:

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

能够成功进行解构

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

两边结构不同,将无法正确地进行完全解构

我们可以用扩展运算符来更加简便地解构数组

例子:

let [a, ...b] = [1, 2, 3, 4, 5, 6, 7];
console.log(a);	// 1
console.log(b);	// [2, 3, 4, 5, 6, 7]

可以把1之外的所有其他数组元素赋值给b

posted @ 2020-09-14 15:06  TidalCoast  阅读(919)  评论(0编辑  收藏  举报