js的数组解构-Toy模板网

这篇具有很好参考价值的文章主要介绍了js的数组解构。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

数组解构（Array Destructuring）时，有几个重要的概念需要了解：

基本数组解构：
- 可以使用方括号（[]）来定义解构模式。
- 解构模式将数组中的值分配给对应的变量。
- 解构是基于位置的，变量的顺序应与数组中的元素对应。

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(c); // 输出：3

默认值：
- 可以为解构的变量指定默认值，以防止解构时对应的值为 undefined。
- 需要注意的是，默认值只会在解构的变量值为 undefined 时起作用。
- 数组中的值为 null、false、0 或空字符串等 falsy 值，不会触发默认值的使用。

const arr = [1, 2];

const [a, b, c = 3] = arr;

console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(c); // 输出：3

const arr1 = [1, null];

const [a1, b1 = 2] = arr1;

console.log(a1); // 输出：1
console.log(b1); // 输出：null

忽略值：
- 可以使用逗号 , 来跳过某些值，以忽略它们并不赋给任何变量。

const arr = [1, 2, 3, 4, 5];

const [a, , c, , e] = arr;

console.log(a); // 输出：1
console.log(c); // 输出：3
console.log(e); // 输出：5

多维数组解构：
- 可以使用嵌套的解构模式来解构多维数组，以提取内部数组的值。

const nestedArray = [1, [2, 3], 4, [5, 6]];

const [a, [b, c], d, [e, f]] = nestedArray;

console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(c); // 输出：3
console.log(d); // 输出：4
console.log(e); // 输出：5
console.log(f); // 输出：6