默认参数是 ES6 中引入的新特性,它允许我们在定义函数时直接指定一个参数的默认值,从而在调用函数时可以不必传递该参数。ES7 对默认参数进行了一些改进,本文将介绍如何使用 ES7 函数的默认参数来提高代码的可读性和可维护性。
默认值为另一个参数
在 ES6 中,我们可以使用函数的默认参数来实现某个参数的默认值为另一个参数,例如:
function myFunction(a, b = a + 1) { console.log(a, b); } myFunction(1); // output: 1 2 myFunction(1, 3); // output: 1 3
在上面的代码中,如果调用 myFunction(1)
,则参数 b
的默认值为 a + 1
,即 2
。如果调用 myFunction(1, 3)
,则参数 b
的值为 3
,覆盖了默认值。
在 ES7 中,我们可以使用另一种方式来实现相同的效果,如下所示:
function myFunction(a, b = a) { console.log(a, b); } myFunction(1); // output: 1 1 myFunction(1, 3); // output: 1 3
在上面的代码中,如果调用 myFunction(1)
,则参数 b
的默认值为 a
,即 1
。如果调用 myFunction(1, 3)
,则参数 b
的值为 3
,覆盖了默认值。
使用默认值为另一个参数时,需要注意的是默认值的求值顺序是从左到右,例如:
function myFunction(a = 1, b = a) { console.log(a, b); } myFunction(); // output: 1 1
在上面的代码中,参数 b
的默认值为 a
,即 1
,而参数 a
的默认值也为 1
,因此输出结果为 1 1
。
默认值为表达式
在 ES6 中,我们可以使用函数的默认参数来实现某个参数的默认值为一个表达式,例如:
function myFunction(a, b = a * 2) { console.log(a, b); } myFunction(1); // output: 1 2 myFunction(1, 3); // output: 1 3
在上面的代码中,如果调用 myFunction(1)
,则参数 b
的默认值为 a * 2
,即 2
。如果调用 myFunction(1, 3)
,则参数 b
的值为 3
,覆盖了默认值。
在 ES7 中,我们可以使用另一种方式来实现相同的效果,如下所示:
function myFunction(a, b = () => a * 2) { console.log(a, b()); } myFunction(1); // output: 1 2 myFunction(1, () => 3); // output: 1 3
在上面的代码中,参数 b
的默认值为一个箭头函数,该箭头函数返回的值为 a * 2
,即 2
。如果调用 myFunction(1, () => 3)
,则参数 b
的值为箭头函数 () => 3
的返回值 3
,覆盖了默认值。
使用默认值为表达式时,需要注意的是默认值不会进行惰性求值,而是在函数定义时就已经求值了,例如:
let a = 1; function myFunction(b = a++) { console.log(b, a); } myFunction(); // output: 1 2 myFunction(); // output: 1 3
在上面的代码中,参数 b
的默认值为 a++
,即 1
,而 a
的值在第一次调用函数时已经变为 2
,因此输出结果为 1 2
。在第二次调用函数时,参数 b
的默认值不再生效,因此输出结果为 undefined 3
。
形参个数
在函数定义时,我们可以通过 Function.length
属性获取函数的形参个数。在 ES6 中,函数的默认参数会影响 Function.length
属性的值,例如:
function myFunction(a, b = 1, c = 2) { console.log(arguments.length, myFunction.length); } myFunction(); // output: 0 1 myFunction(1); // output: 1 1 myFunction(1, 2); // output: 2 1 myFunction(1, 2, 3); // output: 3 1
在上面的代码中,myFunction.length
的值为 1
,因为定义时只写了一个形参 a
。当第一个形参 a
没有传值时,arguments.length
的值为 0
,此时默认参数的个数不会影响 arguments.length
的值。当传递了更多实参时,默认参数的个数也不会影响 arguments.length
的值。
在 ES7 中,函数的默认参数不再影响 Function.length
属性的值,例如:
function myFunction(a, b = 1, c = 2) { console.log(arguments.length, myFunction.length); } myFunction(); // output: 0 3 myFunction(1); // output: 1 3 myFunction(1, 2); // output: 2 3 myFunction(1, 2, 3); // output: 3 3
在上面的代码中,myFunction.length
的值为 3
,默认参数的个数不会影响 arguments.length
的值。
总结
ES7 函数的默认参数在 ES6 的基础上进行了改进,可以更加灵活地指定默认值。在使用默认参数时,需要注意默认值的求值顺序、惰性求值问题以及函数的形参个数问题。合理使用默认参数可以提高代码的可读性和可维护性。
示例代码
-- -------------------- ---- ------- -------- ------------- - - -- - -------------- --- - -------------- -- ------- - - ------------- --- -- ------- - - -------- ------------------ - - -- -- - - -- - -------------- ----- - ------------------- -- ------- - - ------------------ -- -- --- -- ------- - - --- - - -- -------- ----------------- - ---- - -------------- --- - ------------------ -- ------- - - ------------------ -- ------- --------- -
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64a6168648841e989429a54f