ES6 数组新增特性(第一篇):数组解构赋值

136 阅读2分钟

ECMAScript 6(ES6)为 JavaScript 带来了诸多新特性,其中之一就是数组的解构赋值。这个特性允许以一种更简洁和直观的方式从数组中提取值并赋给变量。

数组解构基础

1. 基本语法

数组解构赋值的基本形式是一种模式匹配的语法,它允许你直接从数组中按照一定模式提取元素值。

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

在这个例子中,数组 [1, 2, 3] 中的元素被一一赋值给了变量 a, b, c

2. 默认值

解构赋值允许你为数组中的元素提供默认值。

let [a = 5, b = 7] = [1];
console.log(a); // 输出: 1
console.log(b); // 输出: 7

如果解构赋值时没有找到对应的元素,变量将被赋予默认值。

3. 部分解构

你不必解构数组中的每一个元素。

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

在这个例子中,数组的第二个元素被跳过了。

4. 剩余元素(Rest Elements)

使用剩余元素语法可以将数组中的剩余元素赋值给一个新数组。

let [a, ...rest] = [1, 2, 3, 4];
console.log(a);    // 输出: 1
console.log(rest); // 输出: [2, 3, 4]

使用场景

  • 变量交换:解构赋值可以用于交换两个变量的值,而无需额外的临时变量。
  • 函数返回值:从函数返回数组,并使用解构赋值来获得多个返回值。
  • 提取 JSON 数据:从复杂的 JSON 结构中快速提取所需的数据。

注意事项

  • 解构赋值是 ES6 的新特性,不支持 ES6 的环境可能需要通过 Babel 等工具转译。
  • 在使用解构赋值时,要确保等号右侧的表达式是一个数组,或者至少是可迭代的对象。

数组解构赋值是 ES6 中引入的便捷特性之一,它使得数组元素的提取和变量赋值过程更加直观和简洁。在接下来的文章中,我们将继续探讨 ES6 中其他关于数组的新特性和方法。