在ES6（ECMAScript 2015）之前，JavaScript函数的参数传递相对简单，但也有一些局限性。为了提升开发者的编程体验和代码的可读性，ES6引入了剩余参数、默认参数和解构赋值参数等特性，让函数参数的处理变得更加灵活和便捷。本文将深入探讨这三个功能，并结合实例进行详细讲解。
一、剩余参数（Rest Parameters）
剩余参数允许我们在函数定义中捕获不确定数量的参数，并将它们收集到一个数组中。这对于处理可变数量的参数非常有用，避免了对arguments对象的使用，让代码更加直观和易读。
1.1 描述
function(a, b, ...theArgs) {
// ...
}
如果函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。
在上面的例子中，theArgs将收集该函数的第三个参数（因为第一个参数被映射到a，而第二个参数映射到b）和所有后续参数。
1.2 剩余参数和 arguments对象的区别
剩余参数和 arguments对象之间的区别主要有三个：
- 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
- arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
- arguments对象还有一些附加的属性 （如callee属性）。
1.3 案例：计算多个数字的和
function sum(...numbers) {
return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出: 10
console.log(sum(5, 10)); // 输出: 15
在上述案例中，通过使用剩余参数，我们可以轻松地传递任意数量的参数，并将它们求和。
二、默认参数（Default Parameters）
默认参数是指在函数定义时为参数指定默认值，当调用函数时如果未传递该参数，则使用默认值。在ES6之前，为函数设置默认参数需要手动检查参数是否为undefined并进行赋值，而ES6的默认参数特性简化了这个过程。
2.1 描述
JavaScript 中函数的参数默认是undefined。然而，在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。
以前，一般设置默认参数的方法是在函数体测试参数是否为undefined，如果是的话就设置为默认的值。
下面的例子中，如果在调用multiply时，参数b的值没有提供，那么它的值就为undefined。如果直接执行a * b，函数会返回 NaN。
function multiply(a, b) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // NaN
为了防止这种情况，第二行代码解决了这个问题，其中如果只使用一个参数调用multiply，则b设置为1：
function multiply(a, b) {
b = (typeof b !== 'undefined') ? b : 1;
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
有了默认参数，我们不需要再在函数体内做不必要的检查。现在你可以在函数头将b的默认值置为1：
function multiply(a, b = 1) {
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
2.2 传入 undefined vs 其他假值
在第二次调用中，即使第一个参数在调用时显式设置为undefined（虽然不是null或其他falsy值），但是num参数的值是默认值。
function test(num = 1) {
console.log(typeof num);
}
test(); // 'number' (num is set to 1)
test(undefined); // 'number' (num is set to 1 too)
// test with other falsy values:
test(''); // 'string' (num is set to '')
test(null); // 'object' (num is set to null)
2.3 默认参数可用于后面的默认参数
已经遇到的参数可用于以后的默认参数：
function greet(name, greeting, message = greeting + ' ' + name) {
return [name, greeting, message];
}
greet('David', 'Hi'); //["David", "Hi", "Hi David"]
greet('David', 'Hi', 'Happy Birthday!'); //["David", "Hi", "Happy Birthday!"]
三、解构赋值参数
解构赋值是一项在ES6中引入的功能，允许我们从数组或对象中提取值并赋值给变量。在函数参数中使用解构赋值可以轻松地获取传入的对象或数组的特定属性值。
3.1 案例：打印用户信息
function printUserDetails({ name, age }) {
console.log(`Name: ${name}, Age: ${age}`);
}
const user = { name: 'Alice', age: 30 };
printUserDetails(user); // 输出: Name: Alice, Age: 30
在上述案例中，我们定义了一个函数printUserDetails，它接受一个对象作为参数，然后使用解构赋值获取name和age属性的值并打印出来。
3.2 综合运用：计算购物车中商品总价
这三个特性不仅可以单独使用，还可以结合运用，让我们的代码更加灵活和简洁。
function calculateTotalPrice(discountRate = 0, ...prices) {
const total = prices.reduce((acc, curr) => acc + curr, 0);
return total * (1 - discountRate);
}
console.log(calculateTotalPrice(0.1, 20, 30, 40)); // 输出: 81
console.log(calculateTotalPrice(undefined, 10, 25)); // 输出: 35
在上述案例中，我们定义了一个calculateTotalPrice函数，它接受一个默认参数discountRate和剩余参数prices。通过剩余参数，我们可以传递任意数量的商品价格，并通过默认参数来设置折扣率。函数将所有价格求和后，乘以（1 - 折扣率）得到最终总价。
总结
剩余参数、默认参数和解构赋值参数是ES6为JavaScript函数带来的重要进化。它们让函数定义和调用变得更加灵活、直观和高效。通过合理运用这些特性，我们能够编写出更具有可读性和维护性的代码。
希望本文能够帮助你深入理解剩余参数、默认参数和解构赋值参数的用法，并在实际开发中充分运用它们。在学习和使用过程中，不断探索和实践，让你的JavaScript代码更上一层楼！