扩展运算符和剩余操作符之间的区别？

news/2024/7/10 22:50:19 标签: ES6

扩展运算符（Spread Operator）和剩余操作符（Rest Operator）是JavaScript中的两个相关但功能不同的操作符。

1、扩展运算符（Spread Operator）：
扩展运算符以三个连续的点（…）表示，用于将可迭代对象（如数组、字符串或类数组对象）展开为独立的元素。它在数组字面量、函数调用、函数参数和对象字面量等场景下使用。
在数组字面量中，它可以用来复制、合并或拆解数组，将一个数组展开成多个元素。
在函数调用中，可以将数组作为参数传递给函数，或者将一个数组与其他参数一起传递给函数。
在对象字面量中，可以使用扩展运算符来创建一个新的对象，将现有对象的属性和值复制到新对象中。
以下是使用扩展运算符的示例：

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5]; // 复制和合并数组

function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
const result = sum(...numbers); // 将数组元素作为函数参数传递
const obj1 = { foo: 'bar', x: 42 };
const obj2 = { ...obj1, y: 10 }; // 创建新对象并复制属性

2、剩余操作符（Rest Operator）：
剩余操作符也以三个连续的点（…）表示，用于捕获函数参数中剩余的参数，并将它们作为数组存储在一个变量中。它只能在函数参数中使用。
当函数的参数个数不确定或不固定时，可以使用剩余操作符来接收剩余的参数并将它们作为数组进行处理。
剩余操作符将剩余的参数收集为一个数组，使得可以轻松处理任意数量的参数。
以下是使用剩余操作符的示例：

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}
const result = sum(1, 2, 3, 4, 5); // 使用剩余操作符接收任意数量的参数