ES9 新特性：改进 Rest/Spread 打通 JS 数组的任督二脉

ES9 新特性：改进 Rest/Spread 打通 JS 数组的任督二脉

在 ES9（ECMAScript 2018）中，Rest/Spread 运算符（也称为展开运算符）得到了改进，特别是在处理数组时。这些改进打通了 JavaScript 数组的任督二脉，让前端开发者的代码更加简洁以及易懂。

Rest/Spread 运算符的简介

Rest/Spread 运算符是 JavaScript 中最流行的操作符之一，通常用于函数参数和数组的操作。

在函数参数中，Rest 运算符用来表示一个不确定长度的参数，将一系列参数捆绑成一个数组。比如：

function average(...nums) {
  let total = 0;
  for (const n of nums) {
    total += n;
  }
  return total / nums.length;
}
console.log(average(2, 4, 6, 8, 10)); // 输出 6

在上述代码中，...nums 将传入的所有参数捆绑成一个数组 nums。

在数组操作中，Spread 运算符则用来拆分数组，将其元素展开成多个参数或单个数组。比如：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2, 7, 8, 9];
console.log(arr3); // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

在上述代码中，[...arr1, ...arr2, 7, 8, 9] 将两个数组拆分并合并为一个新数组。

ES9 中 Rest/Spread 运算符的改进

在 ES9 中，Rest/Spread 运算符的一些用法得到了改进，主要是在处理数组时。

首先是 Spread 运算符在对象字面量中的扩展功能：

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // 输出 { x: 1, y: 2, z: 3 }

在ES9 中 Spread 运算符不仅可以应用于数组，而且可以用于对象。使用 ... 运算符时，它能够将一个对象的所有属性和方法展开为一个新的对象。

接下来，Rest 运算符也可以在数组模式下使用：

const arr = [1, 2, 3, 4, 5];
const [first, second, ...rest] = arr;
console.log(first); // 输出 1
console.log(second); // 输出 2
console.log(rest); // 输出 [3, 4, 5]

在上述代码中，我们使用 Rest 运算符将一个数组分成两个变量和一个数组的两个子集。

最后，Rest/Spread 运算符用于数组对象的复制：

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // 输出 [1, 2, 3]

在上述的代码中，我们使用 Spread 运算符将一个数组复制到新数组，而新数组不与原数组有关联，也就是说，修改新数组不会影响原数组。

总结

在 ES9 中，Rest/Spread 运算符的改进和扩展提供了新的方式来处理数组，这种方式会更加简洁和易懂。

我们可以使用 Spread 运算符来展开数组成为函数的参数，将多个数组进行合并，以及复制一个数组。

同时，我们也可以使用 Rest 运算符来捆绑一个不确定长度的参数，对数组进行复制，以及将一个数组分成子集。

这些扩展的使用方式都为我们提供了更加简单和直观的代码。

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