ES9 中的 rest 和 spread 操作符详解

在 JavaScript 的新版本 ES9 (ECMAScript 2018) 中，rest 和 spread 操作符得到了一定的升级和改进，为编写更简洁、易读代码提供了更多的选择。

什么是 rest 操作符

在函数参数中使用 rest 操作符，可以将这些参数合并为单个数组，以便更轻松地处理或传递给其他函数。这个操作符被标识为三个点 ...，紧跟在函数声明的参数列表后面。如下：

function myFunction(...restParams) {
  // restParams 是个数组，包含所有传入的参数
}

这里可以看出，当参数被传递给函数时，所有参数都会被组合成一个数组，并被绑定到 restParams 变量中。

另外，rest 操作符还可以与其他参数一同使用，类似于以下的例子：

function myFunction(param1, param2, ...restParams) {
  // restParams 是个数组，包含除 param1 和 param2 外的所有传入的参数
}

什么是 spread 操作符

在 ES9 中，spread 操作符可以用于展开数组，并将其元素插入到另一个数组中。操作符同样是三个点 ...，但是它不太一样的是，它用在数组前面，而不是函数的参数中。示例如下：

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

const newArray = [...array1, ...array2];
// newArray: [1, 2, 3, 4, 5, 6]

上述代码中，...array1 和 ...array2 展开了两个数组，然后用新的数组将它们连接起来。

与 rest 操作符类似，spread 操作符也可以与其他元素一起使用。这是一个包含对象的数组，我们可以用 spread 操作符将其展开并插入到新的对象中：

const obj1 = { hp: 150, atk: 70 };
const obj2 = { def: 90, spd: 100 };
const pokemon = { name: 'Charmander', type: 'fire', ...obj1, ...obj2 };

console.log(pokemon);
// { name: 'Charmander', type: 'fire', hp: 150, atk: 70, def: 90, spd: 100 }

rest 操作符和 spread 操作符之间的区别

虽然这两个操作符都用三个点表示，但它们用法和作用是不同的。在函数参数中使用三个点，就是 rest 操作符，可以将多个参数合并成一个数组。在数组的前面使用三个点，就是 spread 操作符，可以将非数组的元素转化为多个数组中的元素。

在 ES6 或更早版本中如何实现 rest 和 spread 功能？

如果你使用的是 ES6 或更早的版本，你也可以使用类似的功能。实现 rest 操作符的方法需要使用 arguments 对象和一些 ES6 功能：

function myFunction() {
  const restParams = [...arguments];
  // 传入的参数全部被转化成一个数组
}

通过使用 Array.from() 函数也可以将类数组的 arguments 对象转为数组：

function myFunction() {
  const restParams = Array.from(arguments);
  // 传入的参数和上面一样，全部被转化成一个数组
}

而实现 spread 操作符也很简单，只需要将要展开的数组放在另一个数组中，就行了。

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

const newArray = [].concat(array1, array2);
// newArray: [1, 2, 3, 4, 5, 6]

建议

rest 和 spread 操作符是 JavaScript 中非常有用的功能。它们使代码更整洁、更可读、更重要的是对于函数参数和数组的操作也变得更加灵活。当你需要多个参数时，使用 rest 操作符将它们组合成一个数组，并且如果你需要展开数组，可以用 spread 操作符将它们插入到新的数组中。

建议在编写函数的过程中考虑到这些操作符，利用这一特性让代码变得更加简单和易读。

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