JavaScript - 剩余参数：初学者的全面指南

你好，未来的JavaScript魔法师们！? 我很兴奋能带你们一起探索现代JavaScript中最有用的特性之一：剩余参数（Rest Parameter）。作为一个教编程多年的老师，我可以向你保证，掌握这个概念会让你的编码生活轻松许多。那么，让我们开始吧！

JavaScript - Rest Parameter

什么是剩余参数？

想象一下，你正在举办一个派对，你不确定会有多少客人到来。你准备了一些椅子，但你还有一个舒适的大沙发，可以容纳任何额外的客人。在JavaScript中，剩余参数就像那个沙发——它可以处理你抛给它的任何数量的额外参数！

剩余参数允许一个函数接受一个不定数量的参数作为一个数组。它由三个点号（...）后跟一个参数名表示。

让我们看一个简单的例子：

function gatherFriends(firstFriend, ...otherFriends) {
console.log("我最要好的朋友是：" + firstFriend);
console.log("我其他的 friends 是：" + otherFriends.join(", "));
}

gatherFriends("Alice", "Bob", "Charlie", "David");

在这个例子中，firstFriend将会是"Alice"，而otherFriends将会是一个包含["Bob", "Charlie", "David"]的数组。

输出将会是：

我最要好的朋友是：Alice
我其他的 friends 是：Bob, Charlie, David

为什么使用剩余参数？

灵活性：你可以编写接受任何数量参数的函数。
可读性：你的代码变得更直观，更容易理解。
数组方法：你可以在收集到的参数上使用数组方法。

剩余参数与 arguments 对象

在剩余参数之前，JavaScript有arguments对象。虽然它服务于类似的目的，但剩余参数有几个优点。让我们比较一下：

特性	剩余参数	arguments 对象
类型	真正的数组	类似数组的对象
数组方法	支持	直接不支持
命名参数	可以与命名参数一起使用	不能与命名参数一起使用
清晰性	更明确	不太清晰

以下是一个说明差异的例子：

// 使用 arguments 对象
function sumOld() {
let total = 0;
for(let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}

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

console.log(sumOld(1, 2, 3, 4)); // 10
console.log(sumNew(1, 2, 3, 4)); // 10

正如你所看到的，剩余参数版本更干净，允许我们使用如reduce的数组方法。

扩展运算符与剩余参数

现在，让我们来谈谈扩展运算符。它与剩余参数看起来完全一样（三个点 ...），但它服务于相反的目的。当剩余参数将多个元素收集到一个数组中时，扩展运算符将一个数组展开为单独的元素。

这里有一个有趣的例子：

function makeSandwich(bread, ...fillings) {
console.log("面包：" + bread);
console.log("填充物：" + fillings.join(", "));
}

const myFillings = ["奶酪", "番茄", "生菜"];
makeSandwich("小麦", ...myFillings);

输出：

面包：小麦
填充物：奶酪, 番茄, 生菜

在这个例子中，我们使用扩展运算符将myFillings数组作为单独的参数传递给makeSandwich函数。

与剩余参数解构

解构就像打开一个行李箱——你取出需要的物品，其余的留下。当与剩余参数结合时，它变成了一个强大的工具。让我们看看它是如何工作的：

const [first, second, ...others] = [1, 2, 3, 4, 5];

console.log(first);  // 1
console.log(second); // 2
console.log(others); // [3, 4, 5]

这也适用于对象：

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};

console.log(a);    // 10
console.log(b);    // 20
console.log(rest); // {c: 30, d: 40}

现实世界示例：函数参数

让我们用一个更实际的例子来将所有这些结合起来。想象一下你正在编写一个函数来计算购物车中商品的总价：

function calculateTotal(discount, ...prices) {
const total = prices.reduce((sum, price) => sum + price, 0);
return total * (1 - discount);
}

const groceries = [5.99, 2.50, 3.75, 1.99];
console.log("打9折后的总价：$" + calculateTotal(0.1, ...groceries).toFixed(2));

在这个例子中，我们使用剩余参数来收集所有的价格，然后使用扩展运算符将这些价格传递给函数。输出将会是：

打9折后的总价：$12.81

结论

就这样，朋友们！我们一起穿越了剩余参数的土地，将它与它的老亲戚arguments对象进行了比较，探索了它与扩展运算符的关系，甚至还将它与解构混合使用。

记住，剩余参数就像那个总是愿意伸出援手的朋友——它在那里，让您的编码生活更加轻松，让您的函数更加灵活。所以，勇敢地前进，在您的JavaScript工具包中拥有这个强大的工具！

快乐编码，愿您的函数总是灵活，代码总是可读！??‍??‍?

Credits: Image by storyset