在前端领域，代码的简洁和优秀一直是开发者们追求的目标之一。而在 ES6 中，提供了许多新的语法和特性，其中默认参数就是一种重要的优化方式。
默认参数的基本语法
默认参数是指在函数定义时，给参数设置默认值。当函数被调用时，如果未传入该参数，则会取用默认值。
默认参数的语法如下：
function fun(param1 = defaultValue1, param2 = defaultValue2, ...) {
// 函数体
}例如，有一个求和函数，如果没有传入参数，则默认以 0 为参数进行运算：
function sum(num1 = 0, num2 = 0) {
return num1 + num2;
}
console.log(sum()); // Output: 0
console.log(sum(3)); // Output: 3
console.log(sum(3, 5)); // Output: 8当我们调用 sum() 时，由于没有传入任何参数，函数就会默认将 num1 和 num2 赋值为0。
默认参数的优点
使用默认参数具有许多优点，这些优点能够实现我们在编写代码时的简洁和优美。
1. 减少代码量
我们可以通过设置默认值减少函数内部的代码量。如下所示：
function log(msg, level = 'INFO') {
if (level === 'INFO') {
console.info(msg);
} else if (level === 'ERROR') {
console.error(msg);
}
}在调用 log() 函数时，level 参数设置了默认值，这样就可以避免我们在调用时反复传入同样的参数。
2. 增加代码的可读性
当函数定义时，我们通过使用默认参数使其变得更可读，更容易理解：
function confirm(text = 'Are you sure?') {
if (window.confirm(text)) {
// do something
} else {
// do something else
}
}这个函数在没有传递参数时，将默认显示“Are you sure?”。
3. 避免出现 undefined 变量
如果我们没有使用默认参数，而在函数调用时仅传递了部分参数，那么我们可能会意外获得 undefined 或 null：
function multiply(a, b, c) {
let result = a * b * c;
console.log(result);
}
multiply(2, 3);在执行函数时，由于参数 c 没有进行传递，变量 result 就会变成 undefined。
如果我们想要避免出现这种情况，我们就需要手动设置条件：
-- -------------------- ---- ------- -------- ----------- -- -- - -- ---- --- -- - - - --- --------- - - - -- -- ---- --- -- - - - -- -- --- ------ - - - - - -- -------------------- - ----------- --- -- ------- -
当我们使用默认参数时，如果未传入该参数，函数将默认使用其默认值。
默认参数的使用注意事项
在使用默认参数时，需要注意一些事项，以免造成意外的错误。
1. 默认参数不会进行变量提升
在 ES6 中，使用默认参数不会进行变量提升。这意味着，在一个函数中，如果你想要使用该函数内的某个参数从外部变量中获取某些值，就需要通过如下定义方式：
function justExample(a = 10, b = a + 1) {
console.log(b);
}
justExample(); // Output: 112. 默认参数可以引用先前的参数
在一个函数中，如果我们想要采用前面的参数作为后续的默认参数，我们可以通过下面的方法来实现：
-- -------------------- ---- ------- -------- ---------------- ----- - ----- --- - -------------------- - -- ---- - -------- ------------------- - -- ------ ------ --- - --------------------- ------ -- ------- --- -- --
3. 默认参数不能访问其它参数
在一个函数中，由于函数参数的实现方式是使用私有变量作为函数的参数列表，因此，如果我们在一个默认参数中尝试访问其它参数会出现 ReferenceError。
function errorFunction(a = b, b) {
console.log(a, b);
}
errorFunction(2, 3); // Output: 2 3
errorFunction(); // Output: ReferenceError: Cannot access 'b' before initialization如何结合默认参数和解构语法
在 ES6 中，结构语法也是一种很常用的方式，因此我们可以将两种语法结合使用：
function display({ name = 'No Name', age = 0 } = {}) {
console.log(name, age);
}
display({ age: 25 }); // Output: No Name 25在上面的例子中，首先我们对一个对象进行了解构，然后在对其进行默认参数的定义。
结论
默认参数是 ES6 中带来的非常好的特性，它使代码更简洁、更可读，也避免了意外的错误。在实际操作中，我们应该在适用的场景下加以运用，以获得更佳的开发效率。
示例代码
-- -------------------- ---- -------
-------- -------- - -- ---- - -- -
------ ---- - -----
-
-------- -------- ----- - ------- -
-- ------ --- ------- -
------------------
- ---- -- ------ --- -------- -
-------------------
-
-
-------- ------------ - ---- --- ------- -
-- ---------------------- -
-- -- ---------
- ---- -
-- -- --------- ----
-
-
-------- ----------- -- - - -- -
--- ------ - - - - - --
--------------------
-
-------- ------------- - --- - - - - -- -
---------------
-
-------- ---------------- ----- - ----- --- - -------------------- -
-- ----
-
-------- ------------------- -
-- ------
------ ---
-
-------- --------- ---- - --- ------ --- - - - - --- -
----------------- -----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751b5bd8bd460d3ad8c2ace