ES9 中的数组解构

ES9 中增加了一些新特性，其中就包括数组解构。在编写前端代码时，我们常常需要从数组中提取数据并赋值给变量。ES9 中的数组解构可以让这个过程变得更加方便和简洁。

数组解构的基本语法

数组解构的语法是用一对方括号（[]）包裹一个或多个变量名。变量名可以是任何合法的标识符。例如：

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

上面代码中，我们声明了三个变量 a、b、c 并从数组中提取了三个值分别赋值给了这三个变量。

如果我们的数组中值的数量少于变量的数量，剩余的变量将会被赋值为 undefined：

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

反之，如果我们的数组中值的数量多于变量的数量，多余的值将被忽略：

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

我们还可以使用默认值来避免数组中的 undefined 被赋值给变量：

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

数组解构的嵌套

如果数组中的元素也是数组，我们可以进行嵌套的数组解构：

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

数组解构的用途

数组解构不仅能提高代码的可读性，还可以让我们更方便地进行变量赋值和函数参数传递。下面我们来看几个常见的用途：

交换变量值

使用数组解构可以很容易地交换两个变量的值，而不需要借助中间变量。

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

从函数返回多个值

一个函数可以返回多个值，使用数组解构可以很容易地从函数的结果中提取这些值。

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

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

从函数参数中获取值

当我们定义一个函数时，使用数组解构可以很容易地从参数对象中获取需要的值。

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

doSomething([1, 2]); // 1 2

总结

ES9 中的数组解构为我们提供了一种更加简洁和直观的方式来提取数组中的元素，并赋值给变量。数组解构的嵌套和默认值等特性也使得其更加灵活和强大。我们可以利用数组解构来交换变量、从函数中获取多个值以及从参数对象中获取值等。在实际的开发中，掌握好数组解构的使用方法，可以让我们的代码更加简洁和可读，从而提高开发效率。

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