Javascript 剩余参数与扩展运算符

在Javascript中，有两个非常有用的特性：剩余参数和扩展运算符。本文将介绍这两个特性，并给出实例示范。

剩余参数

在函数定义时，可以使用剩余参数语法 (...)，以传递不确定数目的参数。例如：

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(10, 20, 30, 40)); // 输出 100

在上面的代码中，sum() 函数可以获取不确定数目的参数，并将它们相加。终于可以不用写多个重载函数了！

剩余参数还可以与已知参数配合使用，但要注意的是剩余参数必须是最后一个参数。例如：

function greet(greeting, ...names) {
  return `${greeting}, ${names.join(" and ")}!`;
}

console.log(greet("Hi", "Alice", "Bob", "Charlie")); // 输出 "Hi, Alice and Bob and Charlie!"
console.log(greet("Hello", "Dave")); // 输出 "Hello, Dave!"

在上面的代码中，剩余参数 ...names 可以接收任意数量的参数，并将它们放在一个数组中。我们也看到，已知参数 greeting 和剩余参数 ...names 可以像平常一样一起使用。

扩展运算符

扩展运算符用于展开一个数组，将其元素作为独立的参数传递给一个函数或新的数组中。例如：

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

const newArray = ["a", ...numbers, "b"];
console.log(newArray); // 输出 ["a", 1, 2, 3, 4, "b"]

在上面的代码中，...numbers 将数组 numbers 展开成独立的参数，可以用于函数参数列表中。

还可以使用扩展运算符来合并多个数组。例如：

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2];

console.log(merged); // 输出 [1, 2, 3, 4]

在上面的代码中，...arr1 和 ...arr2 将两个数组展开并合并为一个新的数组 merged。

小结

剩余参数和扩展运算符是Javascript中非常强大的特性。剩余参数可以使函数接收任意数量的参数，扩展运算符可以展开一个数组，并允许将其合并到一个新的数组中。

在使用这两个功能时，要记得它们的使用限制，剩余参数必须放在最后，而扩展运算符只能用于数组或类数组对象。