在 ES6 中，我们可以定义函数时为参数设置默认值。但是它有一个很大的缺点，只能为最后一个参数设置默认值。而在 ES7 中，我们可以为所有参数设置默认值。这意味着我们可以更加方便地定义函数，并省去了很多重复的代码。在本文中，我们将介绍 ES7 中默认参数值的使用方法以及其在前端开发中的应用。
设置默认参数值的语法
在 ES7 中，我们使用等号来为函数的参数设置默认值。下面是设置一个名为 sayHello 的函数，参数为 name，默认值为 "World" 的语法：
function sayHello(name = "World") {
console.log(`Hello, ${name}!`);
}默认参数值的优势
使用默认参数值有很多优势，比如：
- 缩短函数定义代码的长度。
- 更加直观地表达函数的意图。
- 避免在函数中添加大量的 null/undefined 检查。
考虑以下这个例子：
function add(a, b) {
console.log(typeof a === "undefined" ? 0 : a);
console.log(typeof b === "undefined" ? 0 : b);
return a + b;
}这个函数的作用是将 a 和 b 相加。但是，由于 JavaScript 中不存在函数重载，我们必须写一些冗长的代码来检查 a 和 b 是否被传递。使用默认参数值，我们可以将函数定义改写成如下形式：
function add(a = 0, b = 0) {
console.log(a);
console.log(b);
return a + b;
}这个函数几乎可以完美地表达它的意图，而且更加简洁明了。
默认参数值的应用
1. 函数参数
在前端开发中，我们在操作 DOM 或进行网络请求时，经常需要传递回调函数。在很多情况下，这个回调函数可能只是一个简单的回调，而不传递任何参数。在 ES6 以前，我们需要检查回调参数是否存在，如下所示：
-- -------------------- ---- -------
-------- -------------------- -
-- ------- -------- --- ----------- -
-----------
-
-
------------- -- ---- -------- --
------------------- -- -
--------------------- -------- -- ----------
--- -- -- -------- ------ --------- -------- -- --------上述代码的问题是：如果我们不传递回调函数参数，它就会在使用时报错。但是，在实际开发中，我们可能并不需要在没有传递参数的情况下使用回调函数。
使用默认参数值，我们可以告诉函数回调函数是可选的，并设置一个默认回调函数。如下所示：
-- -------------------- ---- -------
-------- ------------------- - -------- -- --- -
-- ------- -------- --- ----------- -
-----------
-
-
------------- -- ---- -------- --
------------------- -- -
--------------------- -------- -- ----------
--- -- -- -------- ------ --------- -------- -- --------这个函数的语义更加明确。
2. 对象解构
在前端开发中，我们经常需要使用对象来传递参数。例如，我们可以使用对象传递一些配置参数。
在 ES7 中，默认参数的值和对象解构可以很好地结合起来。我们可以使用对象解构来创建对象参数的默认值，如下所示：
function getConfig({ apiUrl = "https://example.com/api", timeout = 1000 } = {}) {
console.log(apiUrl, timeout);
}
getConfig(); // 输出 "https://example.com/api 1000"
getConfig({ apiUrl: "https://my.api.com", timeout: 3000 }); // 输出 "https://my.api.com 3000"这个函数的参数是一个对象，它具有两个属性：apiUrl 和 timeout。当我们传递 getConfig() 调用时，函数的默认参数将被设置为空对象。当我们传递 getConfig({ apiUrl: "https://my.api.com", timeout: 3000 }) 调用时，函数将使用我们提供的对象参数。
总结
本文介绍了 ES7 中默认参数值的使用方法，并说明了其在前端开发中的应用。默认参数值可以使我们的代码更加简洁和易于阅读，同时也可以解决一些由于缺少参数而导致的错误。在实际开发中，我们应该尽可能地使用默认参数值，从而提高我们的代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64631c25968c7c53b041fbc5