解读 ES6 中的数组解构语法及其高级用法-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，引入了数组解构语法，可以方便地从数组中提取值并赋给变量。本文将介绍数组解构语法的基本用法，并深入探讨其高级用法，以及如何在实际开发中使用它们。

基本用法

数组解构语法的基本用法很简单，就是用中括号（[]）来匹配数组中的元素，然后将其赋给对应的变量。例如：

const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 输出：1 2 3

这个例子中，我们定义了一个由三个元素组成的数组，然后使用数组解构语法将其分别赋给变量 a、b、c。最后输出这三个变量的值。

需要注意的是，数组解构语法的左边和右边的元素个数必须一致。如果左边的变量数量多于右边的元素数量，未赋值的变量会被赋值为 undefined。如果右边的元素数量多于左边的变量数量，则多余的元素会被忽略。

const [a, b, c, d] = [1, 2, 3];
console.log(a, b, c, d); // 输出：1 2 3 undefined

const [a, b] = [1, 2, 3];
console.log(a, b); // 输出：1 2

我们可以为数组解构语法中的变量设置默认值，以防止未匹配到对应的值时变量变成 undefined。

const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 输出：1 2 3

在这个例子中，变量 c 被设置了默认值为 3。由于数组中只有两个元素，所以变量 c 没有匹配到任何值，最终输出为默认值。

我们也可以使用剩余元素（rest element）来获取数组中剩余的元素，而不必一个一个地匹配。

const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a, b, rest); // 输出：1 2 [3, 4, 5]

在这个例子中，剩余元素被赋值给了变量 rest，它是一个数组，包含了原数组中除了前两个元素以外的所有元素。

数组解构语法也可以用于嵌套数组中。

const [a, [b, c], d] = [1, [2, 3], 4];
console.log(a, b, c, d); // 输出：1 2 3 4

在这个例子中，我们定义了一个嵌套数组，然后使用数组解构语法将其解构为四个变量。变量 b 和 c 是在嵌套数组中定义的，但它们的值仍然可以被正确地解构出来。

在对象解构中，我们也可以使用数组解构语法来获取对象中的数组属性。

const obj = { arr: [1, 2, 3] };
const { arr: [a, b, c] } = obj;
console.log(a, b, c); // 输出：1 2 3

在这个例子中，我们定义了一个包含数组属性的对象，然后使用对象解构语法和数组解构语法将其解构为三个变量。需要注意的是，我们在对象解构语法中使用了别名，将数组属性重命名为了 arr。

数组解构语法在实际开发中有很多应用场景，下面我们来看几个例子。

使用数组解构语法可以方便地交换两个变量的值。

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 输出：2 1

在这个例子中，我们定义了两个变量 a 和 b，然后使用数组解构语法和一个临时数组来交换它们的值。

函数可以使用数组解构语法来返回多个值。

function getValues() {
  return [1, 2, 3];
}

const [a, b, c] = getValues();
console.log(a, b, c); // 输出：1 2 3

在这个例子中，我们定义了一个返回数组的函数，然后使用数组解构语法将其返回值解构为三个变量。

在函数参数中使用数组解构语法可以方便地提取参数值。

function foo([a, b, c]) {
  console.log(a, b, c);
}

foo([1, 2, 3]); // 输出：1 2 3

在这个例子中，我们定义了一个函数 foo，其参数是一个数组。在函数定义中使用数组解构语法，将数组中的三个值分别赋给了函数的三个参数。

数组解构语法是 ES6 中一个非常实用的特性，可以方便地从数组中提取值并赋给变量。除了基本用法之外，我们还介绍了其高级用法和实际应用场景。希望本文可以帮助你更深入地理解和应用数组解构语法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65d9517e1886fbafa46e5173