ES6 中的函数参数默认值详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，我们可以为函数参数设置默认值，这在很多情况下都很方便。在本文中，我们将深入探究函数参数默认值的细节，并为你提供一些实用的例子。

基本用法

在 ES6 之前，我们经常会使用类似以下的方法为函数设置默认参数值：

function greet(name) {
  name = name || 'World';
  console.log('Hello, ' + name + '!');
}

然而，这种方式存在一些问题，如果传入的参数是布尔值 false、空字符串 "" 或者数字 0 都不能触发默认值：

greet(false); // Hello, World!
greet('');    // Hello, World!
greet(0);     // Hello, World!

在 ES6 中，我们可以使用更为简单的语法为函数设置默认值：

function greet(name = 'World') {
  console.log('Hello, ' + name + '!');
}

这种方法不仅代码更为简洁，而且能够正确处理布尔值 false、空字符串 "" 或者数字 0：

greet(false); // Hello, false!
greet('');     // Hello, !
greet(0);      // Hello, 0!

默认参数表达式

当我们为函数参数设置默认值时，可以使用任何值作为默认值，包括表达式。例如：

function greet(name = getDefaultName()) {
  console.log('Hello, ' + name + '!');
}

function getDefaultName() {
  return 'World';
}

在这个例子中，getDefaultName 函数没有被调用，因为我们已经为 name 参数设置了默认值。

默认参数值的新行为

参数默认值有一个新的行为，即当函数被调用时，每次都会重新计算默认值表达式。例如：

function getNow() {
  return new Date().getTime();
}

function logTimestamp(timestamp = getNow()) {
  console.log(timestamp);
}

logTimestamp(); // 输出当前时间戳
setTimeout(() => {
  logTimestamp(); // 输出另一个时间戳
}, 500);

注意，如果我们省略参数，而它又带有默认值，此时函数的 length 属性并不会受到影响：

function greet(name = 'World') {
  console.log('Hello, ' + name + '!');
}

console.log(greet.length); // 0

函数参数默认值和解构赋值

我们可以将解构赋值和函数参数默认值进行结合使用：

function greet({ firstname = 'John', lastname = 'Doe' }) {
  console.log(`Hello, ${firstname} ${lastname}!`);
}

greet({ firstname: 'Bob' }); // 输出 "Hello, Bob Doe!"

当对象参数没有提供 firstname 或 lastname 字段时，那么它们的值将会是默认的 'John' 或 'Doe'。

注意，在使用解构赋值时，如果我们希望 firstname 和 lastname 也拥有默认值，我们不能写成这种形式：

function greet({ firstname, lastname } = { firstname: 'John', lastname: 'Doe'}) {
  console.log(`Hello, ${firstname} ${lastname}!`);
}

greet(); // 输出 "Hello, John Doe!"

这种写法虽然看似正确，但却存在一个陷阱，即当我们传递参数的时候 firstname 和 lastname 将会全都为 undefined，因为这时我们已经指定了参数的默认值，此时函数体内不会再去尝试绑定没有被赋值的变量。

其他用法

设置可变参数

我们可以使用参数默认值来设置可变参数，比如：

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum());        // 0

设置回调函数

我们可以在函数参数中为回调函数设置默认值，比如：

function square(x, callback = () => {}) {
  callback(x * x);
}

square(10, result => console.log(result)); // 输出 100
square(10);                                // 没有输出

在这个例子中，我们为回调函数设置了一个空函数作为默认值，当调用了 square 函数时，如果没有传入回调函数，那么什么也不会发生。

单位换算

我们可以使用参数默认值处理单位换算，比如：

function convert(value, unit = 'cm') {
  const units = { 'cm': 1, 'mm': 0.1, 'inch': 2.54 };
  return value * units[unit];
}

console.log(convert(10));          // 10
console.log(convert(10, 'mm'));    // 1
console.log(convert(10, 'inch'));  // 25.4

在这个例子中，我们使用对象来存储不同单位的换算比例，然后使用参数默认值将单位设置为 'cm'。

总结

函数参数默认值是 ES6 中一些非常有用的特性，它可以让我们在定义函数时更为简洁和精确。我们可以使用任何值作为默认值，包括表达式，同时也可以和解构赋值等语法进行组合使用，有了这些知识，我们可以更好地应对开发中的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a89538add4f0e0ff1bb4f5

ES6 中的函数参数默认值详解