JavaScript 中的默认参数

• 简介
• 默认参数

简介

在 JavaScript 中，函数可以有默认值，即在没有提供值的情况下接收一个值。

默认参数

我们将使用一个简单的加法函数作为例子:

function sum(a, b) {
  return a + b;
}

sum(5, 5); // 10
sum(5, null); // 5
sum(5, undefined); // NaN 
sum(5, ''); // "5"
sum(5, 0); // 5

通常，为了将无效接收值转换为 0，例如，可以执行以下操作:

function sum(a, b) {
  // 如果 'a' 无效，设置为 0
  if (!a) {
    a = 0;
  }
  // 如果 'b' 无效，设置为 0
  if (!b) {
    b = 0;
  }
  return a + b;
}

sum(5, 5); // 10
sum(5, null); // 5
sum(5, undefined); // 5
sum(5, ''); // 5
sum(5, 0); // 5

但是，使用默认参数，我们可以将同一个函数转换如下:

// 我们将 'a' 和 'b' 的默认值定义为 0
function sum(a = 0, b = 0) {
  return a + b; 
}

sum(5); // 5    (5 + 0)
sum(5, undefined); // 5    (5 + 0)
sum(5, null); // 5    (5 + null)  
sum(5, ''); // "5"  (5 + '')
sum(5, 5); // 10   (5 + 5)
sum(5, 0); // 5    (5 + 0)

我们看到默认参数只应用于 undefined 参数，因此接收 null、0 或 '' 将导致使用这些值。

现在再看一个 'Hello World!' 的例子:

function helloWorld(name) {
  return 'Hello ' + name + '!';
}

helloWorld(); // 'Hello undefined!'
helloWorld(undefined); // 'Hello undefined!'
helloWorld(null); // 'Hello null!'
helloWorld(''); // 'Hello !' 
helloWorld('World'); // 'Hello World!'

如果我们没有发送适当的参数，就会得到意想不到的结果，在这种情况下是 Hello undefined!。

我们可以使用默认参数来修复这个问题:

function helloWorld(name = 'World') {
  return 'Hello ' + name + '!';
}

helloWorld(); // 'Hello World!'
helloWorld(undefined); // 'Hello World!' 
helloWorld(null); // 'Hello null!'
helloWorld(''); // 'Hello !'
helloWorld('World'); // 'Hello World!'

我们看到，如果没有发送参数(undefined)，该函数使用默认值，在这种情况下是 'World'。尽管如前所述，默认参数只在接收到的值为 undefined 时才起作用。如果收到 0、null 或 '' 作为参数，将使用这些值。

现在让我们看另一个连接数组的例子:

function salad(fruits, vegetables) {
  return fruits.concat(vegetables);
}

salad(); // TypeError: Cannot read property 'concat' of undefined
salad(['grapes']); // ['grapes', undefined]

salad(['apple', 'pear'], []); // ['apple', 'pear']  
salad(['apple', 'pear'], ['lettuce', 'onion']); // ['apple', 'pear', 'lettuce', 'onion']

使用默认参数:

function salad(fruits = [], vegetables = []) {
  return fruits.concat(vegetables);
}

salad(); //  []
salad(['grapes']); //  ['grapes'] 
salad(['apple', 'pear'], []); //  ['apple', 'pear']
salad(['apple', 'pear'], ['lettuce', 'onion']); //  ['apple', 'pear', 'lettuce', 'onion']

默认参数可以大大简化创建函数时的验证。这些可以是任何类型，即number、object、string 等。甚至函数或先前定义的默认参数。

因此，这完全有效:

function sum(a = 5, b = 3, c = a - b) {
  return a + b + c;
}

sum(); // 10	(5 + 3 + 2) 
sum(3); // 6	(3 + 3 + 0)
sum(10); // 20	(10 + 3 + 7)

function sum2(a = sum(10), b = 5) {
  return a + b;  
}

sum2(); // 25	(20 + 5)
sum2(10); // 15	(10 + 5)