剩余参数与展开运算符的对比学习

ES6引入了剩余参数（rest parameters）和展开运算符（spread operator），它们虽然看起来相似，但在使用场景和功能上有所不同。了解它们的区别和使用方法有助于我们更加高效地处理函数参数和数组操作。

1. 剩余参数（Rest Parameters）

剩余参数用于函数的参数列表中，能够收集所有多余的参数，并将其作为一个数组处理。它的语法是通过 ... 来定义，通常放在函数的最后一个参数位置。

1.1 剩余参数的基本语法

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

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

示例解析：

...args 是一个剩余参数，它收集所有传递给函数的参数，并将它们放入 args 数组中。
使用 reduce() 方法对所有的参数进行求和。

1.2 剩余参数的注意事项

剩余参数只能作为函数参数的最后一个参数。
剩余参数是一个数组，能够使用数组的所有方法，如 map、filter 和 reduce。

function displayNames(prefix, ...names) {
    names.forEach(name => {
        console.log(prefix + " " + name);
    });
}

displayNames("Hello", "Alice", "Bob", "Charlie"); 
// 输出: Hello Alice
// 输出: Hello Bob
// 输出: Hello Charlie

示例解析：

...names 收集了传入函数的所有参数，并将其作为数组 names 进行处理。

2. 展开运算符（Spread Operator）

展开运算符是用于数组、对象或字符串的解构，将数组或对象的元素或属性展开为单独的值或属性。它的语法是 ...，通常用于函数调用、数组合并或对象复制等场景。

2.1 展开运算符的基本语法

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

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

示例解析：

使用 ...arr1 和 ...arr2 展开数组中的元素，将它们合并成一个新数组。

2.2 展开运算符用于对象

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

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

示例解析：

使用 ...obj1 和 ...obj2 展开对象中的键值对，将它们合并成一个新对象。

2.3 展开运算符在函数调用中的应用

function greet(name, age) {
    console.log(`Name: ${name}, Age: ${age}`);
}

const args = ["Alice", 30];
greet(...args);  // 输出 Name: Alice, Age: 30

示例解析：

使用 ...args 展开数组中的元素，并将它们作为独立的参数传递给函数。

3. 剩余参数与展开运算符的对比

特性	剩余参数（`rest`）	展开运算符（`spread`）
适用场景	函数参数中，收集所有多余的参数	数组、对象或函数调用中，展开一个数组或对象
语法	`...args`	`...arr` 或 `...obj`
处理方式	将参数收集为数组	将数组或对象展开为单独的元素或属性
使用位置	仅可作为函数参数的最后一个	可用于函数调用、数组和对象的赋值
数据类型	数组（收集的参数）	解构数组或对象的元素或属性

3.1 剩余参数与展开运算符在函数中的区别

// 使用剩余参数收集多余的参数
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

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

// 使用展开运算符传递数组参数
const nums = [1, 2, 3, 4];
console.log(sum(...nums));  // 输出 10