ES6 中函数的默认参数详解及其在实际应用中的使用-JavaScript中文网-JavaScript教程资源分享门户

前言

ES6 (ECMAScript 6)，通常也称为 ES2015，是 ECMAScript 标准的第六个版本。在 ES6 中，可以使用更简洁的代码来实现更强大的功能。其中一个重要的新特性是函数的默认参数。函数的默认参数可以使函数参数更清晰、更易于理解。

函数的默认参数

在 ES6 中，可以在函数参数中使用默认值。如果函数在调用时没有提供一个参数的值，默认参数将被使用。

基本语法

在函数定义时，可以为函数的一个或多个参数提供默认值。默认值通过赋值符号 = 定义。例如，以下代码定义了一个函数 greeting，并为参数 name 提供了默认值 "world"。

function greeting(name = "world") {
  console.log(`Hello, ${name}!`);
}

当调用 greeting 函数时，可以不传递参数 name 的值：

greeting();          // 输出 "Hello, world!"
greeting("JavaScript");// 输出 "Hello, JavaScript!"

默认参数与解构赋值

我们还可以在默认参数的基础上使用解构赋值，以便更轻松地使用传入的参数。例如，以下代码演示如何使用默认参数和解构赋值：

function sayHello({ name = "world", greeting = "Hello" } = {}) {
  console.log(`${greeting}, ${name}!`);
}

sayHello();                          // 输出 "Hello, world!"
sayHello({});                        // 输出 "Hello, world!"
sayHello({ name: "JavaScript" });    // 输出 "Hello, JavaScript!"
sayHello({ name: "JavaScript", greeting: "Hi" }); // 输出 "Hi, JavaScript!"

在上面的代码中，我们使用了一个对象作为函数的默认参数。我们使用解构赋值来从传入的对象中提取 name 和 greeting 属性的值。

请注意，在默认参数 { name = "world", greeting = "Hello" } = {} 中使用的空对象 {} 表示默认情况下不提供任何参数。如果不传递任何参数调用 sayHello，则默认参数将是空对象 {}。

参数默认值求值的时机

在 JavaScript 中，函数参数的默认值是在函数调用时计算的，而不是在函数定义时计算的。这意味着如果默认值参数使用之前的参数进行计算，那么这个参数将使用之前参数的默认值。

例如，以下代码中，当调用函数 createPassword 时，参数 length 的默认值使用参数 charTypes 的默认值 "letters"：

function createPassword(length = 8, charTypes = length > 10 ? "alphanumeric" : "letters") {
  console.log(`Creating password of length ${length} with character types ${charTypes}...`);
}

createPassword();        // 输出 "Creating password of length 8 with character types letters..."
createPassword(12);      // 输出 "Creating password of length 12 with character types alphanumeric..."

在上面的代码中，使用了一个三元运算符来检查 length 参数的值是否大于 10。如果是，则 charTypes 参数的值为 "alphanumeric"，否则它将默认为 "letters"。

需要注意的是，参数默认值只有在没有传递或者传递值为 undefined 的时候才会生效。如果传递值为 null，则默认值也不会生效。

在实际应用中的使用

默认参数在实际应用中非常实用。使用默认参数，我们可以使代码更简洁、更易于理解。

带默认值的选择器

在许多实际场景中，我们需要编写选择器代码，如下所示：

function getElements(selector) {
  if (selector === undefined) {
    selector = "*";
  }
  return document.querySelectorAll(selector);
}

上述代码中，我们先检查 selector 参数是否已定义。如果 selector 未定义，则使用 "*" 作为默认值。

我们可以使用默认参数以更简洁的方式编写此代码，如下所示：

function getElements(selector = "*") {
  return document.querySelectorAll(selector);
}

对象的默认值

当创建对象时，我们经常需要为属性设置默认值。例如，考虑以下对象：

const book = { title: "JavaScript: The Good Parts", author: undefined };

此对象的 title 属性为 "JavaScript: The Good Parts"，而 author 属性为未定义的。要将未定义的属性设置为默认值，我们可以使用默认参数。例如：

function createBook({ title = "Untitled", author = "Unknown" } = {}) {
  return { title, author };
}

const myBook = createBook({ title: "JavaScript: The Good Parts" });
console.log(myBook); // 输出 { title: "JavaScript: The Good Parts", author: "Unknown" }

在上面的代码中，我们使用了解构赋值来捕获传入的对象中的 title 和 author 属性。在默认参数中使用了空对象 {}，以防没有传递参数或传递的参数不包含 title 和 author 属性。如果我们不提供参数，这个函数将返回一个默认值 { title: "Untitled", author: "Unknown" }。

正确使用默认参数

虽然默认参数在许多场景中都非常实用，但在使用默认参数时需要小心。如果不小心使用默认参数，可能会导致一些微妙并难以发现的错误。

使用 null 或 undefined 作为默认值

如果使用 null 或 undefined 作为默认值，则可能会出现一些问题。当参数未定义时，它将使用其默认值。但是，如果我们想要将某个属性值设置为 null 或 undefined，那么使用默认值将不起作用。例如：

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

greet(undefined);    // 输出 "Hello, world!"
greet(null);         // 输出 "Hello, null!"

上述代码使用 undefined 作为参数调用 greet 函数时，会使用默认参数 "world"，而在使用 null 作为参数调用 greet 函数时，将使用 "null"，而不是默认参数。

使用已经声明的变量作为默认值

如果将已声明的变量作为函数的默认参数值，则该变量的值在整个函数作用域中都是可见的。例如，以下代码将 input 声明为变量，并将其设置为默认的参数值：

let input = "default value";
function foo(value = input) {
  console.log(value);
}

input = "new value";
foo();    // 输出 "new value"

上述代码中，尽管在调用函数 foo 之前，我们将 input 变量的值更改为 "new value"，但调用 foo 时，它仍然将输出 "new value"。

总结

在本文中，我们详细讨论了 ES6 中函数的默认参数。我们了解了默认参数的语法、默认参数与解构赋值的关系以及参数默认值求值的时机。我们还讨论了如何在实际应用中使用默认参数，并提供了一些使用默认参数时需要注意的注意事项。

默认参数是一种非常实用的特性，当正确使用时，可以使代码更简洁、更易于理解。然而，我们需要小心使用默认参数，避免因不小心使用出错导致一些微妙并难以发现的错误。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fe770495b1f8cacdd3baca