ES6 参数默认值

ES6学习 本文总阅读量次

  • 在学习解构赋值时我们有提到过给 对象的属性/数组元素 设置默认值的方法。

  • 同样的，我们也可以给函数的参数设置默认值，当没有接收到该参数时就会使用默认值。

  • 使用方法： 在传参时直接通过=赋值即可，具体可看下面的例子。

  • 注意： 当需要第一个参数使用默认值，而指定第二个参数时，需要显式指定第一个参数值为undefined。(当显式指定参数为null时，是不会使用默认值的)

简单例子

1
2
3
4
5
6
7
8
9
10
function sum (a = 10, b = 5) {
    return a + b;
}
 
console.log(sum(1, 2)); // 3
console.log(sum(5)); // 10
console.log(sum()); // 15
// 当需要第一个参数使用默认值，而指定第二个参数时，需要显式指定第一个参数值为undefined
// 需要注意，当显式指定参数为null时，是不会使用默认值的
console.log(undefined, 10); // 20

参数为对象并解构时的默认值

注意：参数对象进行解构赋值时易忘记设置默认的空对象{ a, b, c } = {}，不给默认值很容易在函数体中使用结构出的变量时出现解构赋值报错的问题：

1
2
3
4
5
6
7
8
9
10
function test(row, {
  type, buyerNick = false, isDecryptReceiverMobile = true, isDecryptPhone = true,
}) {
  console.log(row);
  console.log(type);
  console.log(buyerNick);
  console.log(isDecryptReceiverMobile);
  console.log(isDecryptPhone);
}
test("some row"); // 会抛出解构赋值错误，因为第二个参数无法进行解构赋值操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 可以提供一个默认的空对象作为第二个参数来避免这个错误
function test(row, {
  type, buyerNick = false, isDecryptReceiverMobile = true, isDecryptPhone = true,
} = {}) {
  console.log(row);
  console.log(type);
  console.log(buyerNick);
  console.log(isDecryptReceiverMobile);
  console.log(isDecryptPhone);
}

test("some row");
/*
some row
undefined
false
true
true
*/
ES6学习