JavaScript参数默认值|极客笔记

JavaScript参数默认值

在 JavaScript 中，我们经常需要给函数的参数设置默认值，以防止在调用函数时缺少参数导致的错误。在 ES6 中，我们可以使用默认参数值来简化代码并提高可读性。

什么是默认参数值?

默认参数值是指在定义函数时为参数提供默认值。当调用函数时，如果没有传递参数，则参数将使用默认值。默认参数值可以使函数更具弹性，在某些情况下可以省略参数，而不会引起错误。

在 ES6 之前，我们通常通过以下方式实现默认参数：

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

greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!

在这个示例中，如果没有传递 name 参数，则默认值为 'Guest'。但是这种方式不够灵活，并且在参数为 0 或 false 等值时会出现问题。

使用默认参数值

在 ES6 中，我们可以在函数定义中为参数设置默认值。如果函数调用时没有传递参数，则参数自动使用默认值。

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

greet(); // Output: Hello, Guest!
greet('Bob'); // Output: Hello, Bob!

在这个示例中，我们在函数定义中为 name 参数设置了默认值 'Guest'。当调用 greet 函数时，如果没有传递参数，将使用默认值 'Guest'；如果传递了参数，则使用传递的值。

注意事项

默认参数值只能在函数参数列表的末尾设置。也就是说，如果设置了一个参数的默认值，那么在这个参数后面的所有参数也必须有默认值，否则会出现语法错误。

// 正确的形式
function example(a, b = 10, c = 20) {
  // code here
}

// 错误的形式
function example(a = 5, b, c = 20) {
  // code here
}

默认参数值的作用域是函数作用域。也就是说，默认参数值只能在函数内部使用，外部无法访问。

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

// 这里无法访问 name 变量
console.log(name); // Output: Uncaught ReferenceError: name is not defined

使用默认参数值的示例

示例 1: 计算面积

下面是一个使用默认参数值计算矩形面积的示例：

function calculateArea(width = 5, height = 3) {
  return width * height;
}

console.log(calculateArea()); // Output: 15
console.log(calculateArea(10)); // Output: 30
console.log(calculateArea(10, 4)); // Output: 40

在这个示例中，calculateArea 函数计算矩形的面积。参数 width 和 height 分别设置了默认值 5 和 3。如果只传递一个参数，则另一个参数将使用默认值。

示例 2: 打印用户信息

下面是一个展示用户信息的示例，使用了默认参数值：

function showUserInfo(name = 'Guest', age = 18, city = 'Unknown') {
  console.log(`Name:  ${name}, Age:$ {age}, City: ${city}`);
}

showUserInfo(); // Output: Name: Guest, Age: 18, City: Unknown
showUserInfo('Alice', 25); // Output: Name: Alice, Age: 25, City: Unknown
showUserInfo('Bob', 30, 'New York'); // Output: Name: Bob, Age: 30, City: New York

在这个示例中，showUserInfo 函数展示用户信息。参数 name 默认值为 'Guest'，age 默认值为 18，city 默认值为 'Unknown'。可以根据需要传递部分或全部参数。