在 ES9 中使用 Rest 和 Spread 语法操作函数-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 的 ES6 版本中引入了 Rest 和 Spread 语法，能够使我们更简便地操作函数参数和数组。而在 ES9 中，这些语法又被增强了，可以更好地应用于函数编程中。

Rest 语法

Rest 语法可以将一些参数组合成一个数组。在函数的形参中，以三个点（...）表示 Rest 语法。

function sum(...numbers) {
  return numbers.reduce((prev, curr) => prev + curr);
}

console.log(sum(1, 2, 3, 4, 5)); // 15

在上述代码中，我们可以看到在函数的参数中以 ...numbers 形式来表示 Rest 语法，这样就能够接受多个参数并组成一个数组。在函数体内我们使用了 reduce 方法来将数组进行求和运算。

Spread 语法

Spread 语法与 Rest 语法正好相反，它可以将数组展开成单个参数。在函数调用时，以三个点（...）表示 Spread 语法。

function printName(firstName, lastName) {
  console.log(`Hello ${firstName} ${lastName}`);
}

const fullName = ['John', 'Doe'];
printName(...fullName); // Hello John Doe

在上述代码中，我们可以看到使用 Spread 语法将数组展开为两个单独的参数。调用 printName 函数时，我们使用了 ...fullName 语法来展开数组中的元素作为函数参数。

Rest 和 Spread 完美搭档

Rest 和 Spread 语法不仅可以独立使用，还可以一起使用。Rest 语法将参数打包进数组中，而 Spread 语法可以将数组展开成参数。

function joinArrays(separator, ...arrays) {
  return arrays.flat().join(separator);
}

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
console.log(joinArrays('-', arr1, arr2)); // 1-2-3-4-5-6

在上述代码中，我们可以看到 Rest 和 Spread 语法一起使用的效果。joinArrays 函数可以接受多个数组作为参数，并将它们连接起来，每个数组之间使用分隔符分开。

需要注意的是，Rest 参数必须是函数的最后一个参数，否则会报错。

总结

通过本文，我们学会了如何使用 Rest 和 Spread 语法操作函数，以及如何将它们一起使用。Rest 和 Spread 语法可以使我们更加便利地操作函数和数组，将它们熟练运用到函数编程中，可以提高代码的可读性和效率。

示例代码：https://codepen.io/cjsx/pen/ExgEezV

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