JavaScript 参数默认值

在 JavaScript 中,函数的参数可以设置默认值,这意味着在调用函数时,如果没有为某个参数传递值,则会使用默认值。这个特性在简化代码、提高代码可读性和灵活性方面非常有用。本文将介绍 JavaScript 中参数默认值的使用方法,并通过代码示例来说明其用法。

默认值的基本语法

在 JavaScript 中,可以通过在函数定义时为参数指定默认值来实现参数默认值的功能。默认值可以是任何合法的 JavaScript 表达式,例如常量、变量、函数调用等等。

下面是设置参数默认值的基本语法:

function functionName(param1 = defaultValue1, param2 = defaultValue2, ...) {
  // 函数体
}

在上面的代码中,param1param2 是函数 functionName 的参数,defaultValue1defaultValue2 是对应参数的默认值。如果在调用函数时没有为这些参数传递值,那么它们将会使用默认值。

简化代码

使用参数默认值可以简化代码,特别是在处理可选参数时非常有用。以一个计算矩形面积的函数为例:

function calculateArea(width, height) {
  if (width === undefined) {
    width = 0;
  }
  if (height === undefined) {
    height = 0;
  }
  return width * height;
}

上面这个函数接受两个参数 widthheight,如果没有为这两个参数传递值,它们默认为 0。但是通过使用参数默认值,可以简化这段代码:

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

在上述代码中,使用默认值 0 初始化了 widthheight 参数,这样在调用函数时就不需要再进行 undefined 的判断。

默认值表达式

参数默认值可以是任何合法的 JavaScript 表达式,这使得默认值可以是动态计算的。例如,我们可以在默认值中调用函数:

function greet(name = getDefaultName()) {
  return 'Hello, ' + name;
}

function getDefaultName() {
  return 'Guest';
}

console.log(greet()); // 输出: Hello, Guest
console.log(greet('Alice')); // 输出: Hello, Alice

上面的代码中,greet 函数接受一个参数 name,如果没有传递 name 的值,则会调用 getDefaultName 函数来获取默认值,这样就可以根据需要动态计算默认值。

参数默认值的限制

需要注意的是,参数默认值只会对 undefined 生效,而不是对其他 falsy 值(比如 nullfalse0、空字符串等)生效。这意味着如果传递给函数的参数值是 null 或者空字符串等 falsy 值,那么参数仍然会使用传递的值,而不是默认值。

function greet(name = 'Guest') {
  return 'Hello, ' + name;
}

console.log(greet(null)); // 输出: Hello, null
console.log(greet('')); // 输出: Hello,
console.log(greet(false)); // 输出: Hello, false

在上面的代码中,参数 name 的默认值是 'Guest',但是在调用函数时传递给 name 的值是 null、空字符串和 false,所以默认值并没有生效。

默认值的作用域

参数默认值的作用域只在函数体内部。也就是说,参数默认值只在函数体内部可见,而不会影响到函数外部的变量。

let x = 10;

function foo(a = x) {
  let x = 20;
  console.log(a);
}

foo(); // 输出: 10

在上述代码中,虽然函数 foo 的参数 a 的默认值是变量 x,但是它使用的是函数外部的变量 x,而不是函数内部的变量 x

总结

参数默认值是 JavaScript 中一个非常有用的特性,可以简化代码、提高代码可读性和灵活性。本文介绍了参数默认值的基本语法以及如何使用参数默认值来简化代码。