了解js函数的默认参数

今天学习代码书写规范时看到关于函数默认参数相关的内容

 

 之前一直都知道在es6中引入了函数的默认参数，但是只有尝鲜的时候用了用，后面还是一直习惯使用第一种方式来给需要默认值的参数赋值。

今天就回忆一下es6函数默认参数的用法吧。

 

请看下面代码：

function foo(num1){
  console.log(num1);
}
foo();

在调用函数foo时，你没有传递任何参数，因此形参num1的默认值设置为undefined。但是，有时你可能需要在函数不传值时，形参num1的值为一个具体的值，这时候，按照之前的写法，应该是这样写：

function foo(num1) {
  num1 ？num1 : false
  console.log(num1);
}
foo();

此时，如果你调用函数时不传num1，打印出的num1的值为false。

1、ECMAScript 6引入了函数的默认参数。使用ECMA 2015的默认参数功能，你将不再需要检查未定义的参数值。现在，你可以将9设置为参数本身的默认值。你可以重写上述函数以使用默认值，如下所示：

function foo(num1 = false) {
  console.log(num1);
}
foo();

对于函数foo，如果num1参数的值未被传递，那么JavaScript将设置 false 作为num1的默认值。并且，及时你穿的参数为undefined，得到的结果也是false。 即foo(undefined)的结果为打印false。

原因是赋予参数默认值的行为在预编译后，也就是在你将undefined赋予参数后，系统检测num1的值为undefined，故将false赋予num1。

 

 

2、JavaScript函数默认值在运行时计算。为了更好地理解这一点，请看以下代码

function foo(value = koo()) {
  return value;
}
function koo() {
  return "code";
}
var a = foo();
console.log(a);

在函数foo中，参数值的默认值设置为函数koo。在运行时调用函数foo时，将计算函数koo。调用foo函数后，浏览器会输出字符串'code'

 

3、默认参数可供之后的默认参数使用。请看下列代码：

function foo(num1 = 9, num2 = num1 + 8){
  console.log(num2);
}
foo();

在上面的代码中，使用num1的默认值来计算num2的默认值。调用函数foo时浏览器会输出数字 17

 

结论

JavaScript默认参数在编写函数时非常有用。在调用函数时，如果缺少参数，则默认参数功能允许你为函数参数分配默认值，而不是将其定义为undefined。