在开发前端应用程序时,经常需要编写函数接受不同数量的参数。有些参数是必需的,而有些参数是可选的。那么,当可选参数没有被传递时,我们如何为这些参数设置默认值呢?
ES6 之前的方法
在 ES6 之前,我们通常使用逻辑或(||
)操作符来为可选参数设置默认值。这种方法不仅冗长,而且容易出错。
例如:
-- -------------------- ---- ------- -------- ----------- --------- - ---- - ---- -- -------- -------- - -------- -- -------- ------------------------- ----------- - -------- -- ------ ------ --------------- -- ------ ------ ------------ ------ -- --- ----展开代码
上面的示例代码中,我们使用了逻辑或操作符来为参数 name
和 greeting
设置默认值。如果这些参数未被传递或者被传递为空值或假值,就会使用指定的默认值。但是,这种方法存在一些问题。例如,当 name
的值为 0
或空字符串时,就会使用默认值 Guest
,这可能不是我们所期望的行为。
ES6 默认参数语法
ES6 引入了默认参数语法来解决这个问题。使用默认参数语法,我们可以在函数定义中直接为参数设置默认值。当参数未被传递或被传递为空值或假值时,就会使用指定的默认值。
例如:
function greet(name = 'Guest', greeting = 'Hello') { console.log(`${greeting}, ${name}!`); } greet(); // Hello, Guest! greet('Alice'); // Hello, Alice! greet('Bob', 'Hi'); // Hi, Bob!
上面的示例代码中,我们使用默认参数语法来为参数 name
和 greeting
设置默认值。如果这些参数未被传递或者被传递为空值或假值,就会使用指定的默认值。
注意事项
在使用默认参数语法时,需要注意以下几点:
- 如果函数有多个参数,并且想要为其中某些参数设置默认值,那么这些参数必须放在最后。
- 可以使用
undefined
来表示不传递该参数,而不会使用默认值。 - 默认参数的求值是惰性的,即只有在调用函数时才会进行求值,所以可以使用表达式作为默认值。
例如:
-- -------------------- ---- ------- --- ----- - -- -------- ------ - - -------- - ------ - - -- - -------------------- -- - -------------------- -- - ------------------ ------------ -- -展开代码
上面的示例代码中,我们使用一个全局变量 count
来记录函数执行次数。当参数 b
未被传递时,就会使用 count++
作为默认值。由于默认参数的求值是惰性的,因此只有在调用函数时才会对 count++
进行求值。
结论
在 JavaScript 中,我们可以使用逻辑或操作符或者默认参数语法来为可选参数设置默认值。ES6 的默认参数语法比逻辑或操作符更加简洁、清晰,并且避免了一些潜在的问题。在编写函数时,应该尽可能地使用默认参数语法来为可选参数设置默认值。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/12451