JavaScript - 默认参数

你好，未来的JavaScript魔法师们！今天，我们将要探索JavaScript中默认参数的神奇世界。作为你友好邻里的计算机老师，我很兴奋能引导你们进行这次旅行。所以，拿起你的虚拟魔杖（键盘），让我们施展一些代码魔法！

默认参数语法

在JavaScript的古老时代（ES6之前），为函数参数设置默认值就像试图教一只猫去捡球一样 - 可能，但并不优雅。我们必须使用这样的技巧：

function greet(name) {
name = name || 'Anonymous';
console.log('Hello, ' + name + '!');
}

但现在，有了ES6及以后的版本，我们有了更优雅的方式来做这件事：

function greet(name = 'Anonymous') {
console.log(`Hello, ${name}!`);
}

greet(); // 输出: Hello, Anonymous!
greet('Alice'); // 输出: Hello, Alice!

在这个例子中，如果我们不向greet()传递参数，它将使用默认值'Anonymous'。这就像有一个礼貌的门卫，如果他不认识你的名字，就会使用一个通用的问候！

将表达式作为默认参数值

默认参数不仅限于简单的值。它们也可以是表达式！让我们看一个例子：

function calculateArea(length, width = length) {
return length * width;
}

console.log(calculateArea(5)); // 输出: 25
console.log(calculateArea(5, 3)); // 输出: 15

在这里，如果我们不提供宽度，它将使用长度值。这就像一个懒惰的正方形制造商 - 如果你只给它一个边，它会假设你想要一个正方形！

我们可以做得更复杂：

function getRandomGreeting(name, greeting = `Hello, ${name}! The lucky number is ${Math.floor(Math.random() * 100)}.`) {
console.log(greeting);
}

getRandomGreeting('Bob'); // 输出: Hello, Bob! The lucky number is 42. (或者任何一个随机数)

这个函数在每次没有提供自定义问候语时都会生成一个随机的幸运数。这就像一个幸运饼干，但更友好！

传递Undefined参数

这里有一个需要注意的奇怪行为：

function showMessage(message = 'Default message') {
console.log(message);
}

showMessage(undefined); // 输出: Default message
showMessage(null); // 输出: null

传递undefined和没有传递任何东西一样，所以它会触发默认值。但null被认为是一个有效值，所以它会覆盖默认值。就像undefined在说“我不知道，你决定”，而null在说“我已经做了选择，我的选择是没有东西！”

函数表达式作为默认参数

我们甚至可以使用函数表达式作为默认参数。来看看这个：

function greet(name, getGreeting = () => 'Hello') {
console.log(`${getGreeting()} ${name}!`);
}

greet('Alice'); // 输出: Hello Alice!
greet('Bob', () => 'Hi there'); // 输出: Hi there Bob!

这允许我们不仅自定义默认参数的值，还可以自定义其行为。这就像拥有一个可定制的问候机器人！

函数可选参数

现在，让我们来谈谈可选参数。在JavaScript中，所有参数默认都是可选的。如果你不提供它们，它们会变成undefined。但有了默认参数，我们可以给它们提供备用值：

function createUser(name, age, country = 'Unknown') {
return {
name: name,
age: age,
country: country
};
}

console.log(createUser('Alice', 30)); // 输出: { name: 'Alice', age: 30, country: 'Unknown' }
console.log(createUser('Bob', 25, 'USA')); // 输出: { name: 'Bob', age: 25, country: 'USA' }

这样，我们可以使一些参数是必需的（如名字和年龄），而其他的则是可选的（如国家）。这就像填写一个表格，其中一些字段带有红色星号标记为必填，而其他的只是 nice-to-have！

下面是一个总结我们所讨论方法的表格：

方法	描述	示例
基本默认参数	如果没有传递参数，则提供备用值	function greet(name = 'Anonymous')
表达式作为默认值	使用表达式来计算默认值	function calcArea(length, width = length)
Undefined行为	undefined触发默认值，null不触发	showMessage(undefined) vs showMessage(null)
函数作为默认值	使用函数来计算默认值	function greet(name, getGreeting = () => 'Hello')
可选参数	使一些参数可选并设置默认值	function createUser(name, age, country = 'Unknown')

记住，年轻的 Padawans，默认参数就像是你们代码中的安全网。当你们跌倒（或者忘记传递参数）时，它们会接住你们，确保你们的函数总是有东西可以工作。明智地使用它们，愿代码与你同在！

Credits: Image by storyset