剩余参数和展开运算符的区别

一、剩余参数

剩余参数语法允许在函数定义时，将多个参数表示为一个参数数组。

 使用剩余参数，可以将不定数量的参数作为一个数组接收，并在函数内部对其进行操作。剩余参数使用三个点 (…) 加上一个参数名来表示，通常用于函数的最后一个参数。

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}
 
console.log(sum(1, 2, 3, 4)); // 输出: 10

在上面的例子中，剩余参数 ...numbers 接收了任意数量的参数，并将它们作为数组传递给函数内部。这样就可以在函数内部使用数组的方法或遍历来处理这些参数。

二、展开运算符

展开运算符可以用于在函数调用、数组字面量、对象字面量等场景中，将一个数组或对象展开成独立的元素。它使用三个点 (…) 来表示。

1、 在函数调用中，展开运算符可以将一个数组展开为独立的参数：

function sum(x, y, z) {
  return x + y + z;
}
 
const numbers = [1, 2, 3];
//展开成 1  2  3
console.log(sum(...numbers)); // 输出: 6

2、在数组字面量中，展开运算符可以将一个数组的元素一一展开：

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const combinedNumbers = [...numbers1, ...numbers2];
console.log(combinedNumbers); // 输出: [1, 2, 3, 4, 5, 6]

3、在对象字面量中，展开运算符可以将一个对象的键值对一一展开：

const person = { name: 'Alice', age: 25 };
const extendedPerson = { ...person, city: 'New York' };
console.log(extendedPerson); // 输出: { name: 'Alice', age: 25, city: 'New York' }

展开运算符可以将一个数组或对象拆解成独立的元素，便于在函数调用或复制对象时简洁地传递或合并数据。

总结来说，剩余参数用于将多个参数表示为一个数组，而展开运算符用于将数组或对象展开为独立的元素。它们的使用场景和作用略有不同，但都提供了便捷的方式来处理函数参数或数组元素。