JavaScript 展开运算符与剩余参数

当你需要处理数组或函数参数时，展开运算符和剩余参数就派上用场了。展开运算符的作用就像是一个“拆包”专家，它可以把一个数组或对象拆开，变成一个个独立的元素。而剩余参数则像是“打包”高手，它能把多个单独的函数参数打包成一个数组，让你的代码看起来更整洁。

展开运算符

在 JavaScript 中，展开运算符 ... 可以用来展开数组或对象。它可以用于函数调用、数组构造和对象构造等多种场景。

1、函数调用中的展开运算符：

function sum(a, b, c) {
  return a + b + c;
}

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

2、数组构造中的展开运算符：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2];
console.log(combined); // 输出 [1, 2, 3, 4, 5, 6]

3、对象构造中的展开运算符：

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // 输出 { a: 1, b: 2, c: 3, d: 4 }

剩余参数

剩余参数在JavaScript中也用三个点（…）来表示，不过它的工作地点是在函数参数里面。它的作用就是把那些数量不固定的参数一股脑儿地收进一个数组里。简单来说，就是如果你不知道会有多少个参数传给函数，剩余参数就能帮你把这些参数打包成一袋子（一个数组），这样你就可以一次性处理它们了。

function sum(...args) {
  return args.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出 10
console.log(sum(5, 10, 15));  // 输出 30