随着 JavaScript 的不断发展，每年 ECMAScript 都会发布新的版本，不断增加新的特性和功能，让前端开发人员更容易地实现各种功能和增加代码的复用性。其中，在 ECMAScript 2021 (ES12) 中，引入了一个新的语法特性——default 参数，使得函数参数更加灵活。
default 参数的定义
default 参数可以让我们在定义函数的时候为参数预设默认值，当调用函数时如果没有传参，就会自动使用默认值。
默认参数可以使用表达式或者函数来定义，如下示例代码：
function foo(x = 1 + 1, y = () => x) {
console.log(x, y());
}
foo(); // 输出 2, 2
foo(3); // 输出 3, 4上述代码中，函数 foo 的两个参数都设置了默认值，当调用 foo 函数时，如果没有传入参数，则会默认使用参数预设默认值。在这个例子中，x 参数的默认值为 1 + 1，y 参数的默认值为一个返回 x 参数值的箭头函数。
default 参数的优助
default 参数的优助主要在于增加了函数参数的灵活性，使得我们不必再去写一堆相似但又稍有不同的函数，并且代码更加简洁，易于阅读和维护。
下面我们来看一个具有实际意义的示例。
假设我们正在构建一个在线商城应用，有一个订单列表展示功能，需要根据订单类型的不同，在列表中展示不同的订单状态信息。按照传统的方式去实现，我们需要写三个不同的函数分别处理每一种订单类型的订单状态信息：
-- -------------------- ---- -------
-------- ---------------------------------- -
-- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
-
-
-------- ----------------------------------- -
-- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
-
-
-------- ---------------------------------- -
-- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
-
-在上面的代码中，我们需要写三个分别处理相同但处理细节稍有不同的函数来实现订单状态信息的不同展示。
但是，在有了default参数后，我们可以通过只使用一个函数，来处理不同订单类型的订单状态信息，代码如下:
-- -------------------- ---- -------
-------- -------------------------- ----------- - ------ -
-- ---------- --- --------- -
-- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
-
- ---- -- ---------- --- ---------- -
-- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
-
- ---- -- ---------- --- --------- -
-- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
- ---- -- ------------ --- ------ -
------------------------
-
-
-在改进后的代码中，我们把三个不同的函数整合成了一个函数，利用了 default 参数和代码的动态特性，让函数参数更加灵活。当调用 showOrderStatus 函数时，可以直接传入 orderType 和 orderStatus 参数，并且只需要改变 orderStatus 参数值，就可以实现所有不同订单类型的订单状态信息展示。
总结
default 参数是 ECMAScript 2021 中很好的一个新增特性，可以使函数参数更加灵活。通过给参数设置默认值，可以大大提高代码的复用性和可维护性，从而使程序开发更加高效。在日常开发中，我们应该学会使用 default 参数，以便更好地处理不同的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7f29ef6b2d6eab335ea0e