前言
ES6 (ECMAScript 6)，通常也称为 ES2015，是 ECMAScript 标准的第六个版本。在 ES6 中，可以使用更简洁的代码来实现更强大的功能。其中一个重要的新特性是函数的默认参数。函数的默认参数可以使函数参数更清晰、更易于理解。
函数的默认参数
在 ES6 中，可以在函数参数中使用默认值。如果函数在调用时没有提供一个参数的值，默认参数将被使用。
基本语法
在函数定义时，可以为函数的一个或多个参数提供默认值。默认值通过赋值符号 = 定义。例如，以下代码定义了一个函数 greeting，并为参数 name 提供了默认值 "world"。
-------- ------------- - -------- - ------------------- ----------- -
当调用 greeting 函数时，可以不传递参数 name 的值：
----------- -- -- ------- ------- ------------------------- -- ------- ------------
默认参数与解构赋值
我们还可以在默认参数的基础上使用解构赋值，以便更轻松地使用传入的参数。 例如，以下代码演示如何使用默认参数和解构赋值：
-------- ---------- ---- - -------- -------- - ------- - - --- - ------------------------- ----------- - ----------- -- -- ------- ------- ------------- -- -- ------- ------- ---------- ----- ------------ --- -- -- ------- ------------ ---------- ----- ------------- --------- ---- --- -- -- ---- ------------
在上面的代码中，我们使用了一个对象作为函数的默认参数。我们使用解构赋值来从传入的对象中提取 name 和 greeting 属性的值。
请注意，在默认参数 { name = "world", greeting = "Hello" } = {} 中使用的空对象 {} 表示默认情况下不提供任何参数。 如果不传递任何参数调用 sayHello，则默认参数将是空对象 {}。
参数默认值求值的时机
在 JavaScript 中，函数参数的默认值是在函数调用时计算的，而不是在函数定义时计算的。这意味着如果默认值参数使用之前的参数进行计算，那么这个参数将使用之前参数的默认值。
例如，以下代码中，当调用函数 createPassword 时，参数 length 的默认值使用参数 charTypes 的默认值 "letters"：
-------- --------------------- - -- --------- - ------ - -- - -------------- - ---------- - --------------------- -------- -- ------ --------- ---- --------- ----- ------------------ - ----------------- -- -- --------- -------- -- ------ - ---- --------- ----- ----------- ------------------- -- -- --------- -------- -- ------ -- ---- --------- ----- ----------------
在上面的代码中，使用了一个三元运算符来检查 length 参数的值是否大于 10。如果是，则 charTypes 参数的值为 "alphanumeric"，否则它将默认为 "letters"。
需要注意的是，参数默认值只有在没有传递或者传递值为 undefined 的时候才会生效。如果传递值为 null，则默认值也不会生效。
在实际应用中的使用
默认参数在实际应用中非常实用。使用默认参数，我们可以使代码更简洁、更易于理解。
带默认值的选择器
在许多实际场景中，我们需要编写选择器代码，如下所示：
-------- --------------------- -
-- --------- --- ---------- -
-------- - ----
-
------ ------------------------------------
-上述代码中，我们先检查 selector 参数是否已定义。如果 selector 未定义，则使用 "*" 作为默认值。
我们可以使用默认参数以更简洁的方式编写此代码，如下所示：
-------- -------------------- - ---- - ------ ------------------------------------ -
对象的默认值
当创建对象时，我们经常需要为属性设置默认值。例如，考虑以下对象：
----- ---- - - ------ ------------ --- ---- ------- ------- --------- --
此对象的 title 属性为 "JavaScript: The Good Parts"，而 author 属性为未定义的。要将未定义的属性设置为默认值，我们可以使用默认参数。例如：
-------- ------------ ----- - ----------- ------ - --------- - - --- - ------ - ------ ------ -- - ----- ------ - ------------ ------ ------------ --- ---- ------ --- -------------------- -- -- - ------ ------------ --- ---- ------- ------- --------- -
在上面的代码中，我们使用了解构赋值来捕获传入的对象中的 title 和 author 属性。在默认参数中使用了空对象 {}，以防没有传递参数或传递的参数不包含 title 和 author 属性。 如果我们不提供参数，这个函数将返回一个默认值 { title: "Untitled", author: "Unknown" }。
正确使用默认参数
虽然默认参数在许多场景中都非常实用，但在使用默认参数时需要小心。如果不小心使用默认参数，可能会导致一些微妙并难以发现的错误。
使用 null 或 undefined 作为默认值
如果使用 null 或 undefined 作为默认值，则可能会出现一些问题。当参数未定义时，它将使用其默认值。但是，如果我们想要将某个属性值设置为 null 或 undefined，那么使用默认值将不起作用。例如：
-------- ---------- - -------- - ------------------- ----------- - ----------------- -- -- ------- ------- ------------ -- -- ------- ------
上述代码使用 undefined 作为参数调用 greet 函数时，会使用默认参数 "world"，而在使用 null 作为参数调用 greet 函数时，将使用 "null"，而不是默认参数。
使用已经声明的变量作为默认值
如果将已声明的变量作为函数的默认参数值，则该变量的值在整个函数作用域中都是可见的。例如，以下代码将 input 声明为变量，并将其设置为默认的参数值：
--- ----- - -------- ------- -------- --------- - ------ - ------------------- - ----- - ---- ------- ------ -- -- ---- ------
上述代码中，尽管在调用函数 foo 之前，我们将 input 变量的值更改为 "new value"，但调用 foo 时，它仍然将输出 "new value"。
总结
在本文中，我们详细讨论了 ES6 中函数的默认参数。我们了解了默认参数的语法、默认参数与解构赋值的关系以及参数默认值求值的时机。我们还讨论了如何在实际应用中使用默认参数，并提供了一些使用默认参数时需要注意的注意事项。
默认参数是一种非常实用的特性，当正确使用时，可以使代码更简洁、更易于理解。然而，我们需要小心使用默认参数，避免因不小心使用出错导致一些微妙并难以发现的错误。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fe770495b1f8cacdd3baca