ES10 实战技巧分享：如何利用带有默认值的函数参数简化代码

在 JavaScript 中，函数参数是非常常见的一种数据类型。在 ES6 中，我们已经可以使用默认参数的方式来简化函数的书写，而在 ES10 中，新增了一种更加强大的默认参数的方式，可以让我们更加便捷地书写复杂的函数。

默认参数的基本用法

在 ES6 中，我们可以使用以下方式来定义默认参数：

function sayHello(name = 'world') {
  console.log(`Hello, ${name}!`);
}

sayHello(); // Hello, world!
sayHello('Alice'); // Hello, Alice!

在上面的例子中，我们定义了一个 sayHello 函数，并为其添加了一个默认参数 name，其默认值为 'world'。当调用 sayHello 函数时，如果没有传入参数，则会使用默认值 'world'，否则会使用传入的参数。

在 ES10 中，我们可以使用以下方式来定义更加复杂的默认参数：

function createUser({ username = 'guest', isAdmin = false } = {}) {
  console.log(`username: ${username}, isAdmin: ${isAdmin}`);
}

createUser(); // username: guest, isAdmin: false
createUser({ username: 'Alice' }); // username: Alice, isAdmin: false
createUser({ isAdmin: true }); // username: guest, isAdmin: true
createUser({ username: 'Bob', isAdmin: true }); // username: Bob, isAdmin: true

在上面的例子中，我们定义了一个 createUser 函数，并为其添加了一个默认参数 { username = 'guest', isAdmin = false }，其默认值为一个空对象 {}。当调用 createUser 函数时，如果没有传入参数，则会使用默认值 { username: 'guest', isAdmin: false }，否则会使用传入的参数。

利用默认参数简化代码

通过使用默认参数，我们可以更加便捷地书写复杂的函数，并减少重复的代码。例如，我们可以使用默认参数来简化以下代码：

// www.javascriptcn.com code example
function createPerson(name, age, gender) {
  if (!name) {
    throw new Error('Missing name!');
  }

  if (!age) {
    throw new Error('Missing age!');
  }

  if (!gender) {
    throw new Error('Missing gender!');
  }

  return {
    name,
    age,
    gender,
  };
}

// 等价于

function createPerson(name, age, gender) {
  if (!name || !age || !gender) {
    throw new Error('Missing arguments!');
  }

  return {
    name,
    age,
    gender,
  };
}

通过使用默认参数，我们可以更加简洁地书写上面的代码：

// www.javascriptcn.com code example
function createPerson(name, age, gender = 'unknown') {
  if (!name || !age) {
    throw new Error('Missing arguments!');
  }

  return {
    name,
    age,
    gender,
  };
}

在上面的代码中，我们为 gender 参数添加了一个默认值 'unknown'，并且只需要检查 name 和 age 参数是否存在即可，不再需要重复地检查 gender 参数。

更深入的学习和指导意义

默认参数是一种非常实用的技巧，可以让我们更加便捷地书写复杂的函数。通过学习和掌握默认参数的使用方法，我们可以提高代码的可读性和可维护性，减少重复的代码，并且可以更加专注于解决实际问题。

在使用默认参数时，需要注意以下几点：

• 默认参数只能放在函数参数的最后面；
• 默认参数的值只会在函数调用时计算一次；
• 默认参数的值可以是任意表达式，包括函数调用和对象字面量等。

最后，我们可以通过以下代码来测试默认参数的使用效果：

function testDefaultParam(x, y = 10, z = x + y) {
  console.log(`x: ${x}, y: ${y}, z: ${z}`);
}

testDefaultParam(1); // x: 1, y: 10, z: 11
testDefaultParam(1, 2); // x: 1, y: 2, z: 3
testDefaultParam(1, 2, 3); // x: 1, y: 2, z: 3
testDefaultParam(1, undefined, 3); // x: 1, y: 10, z: 11

在上面的代码中，我们定义了一个 testDefaultParam 函数，并为其添加了三个参数 x、y 和 z，其中 y 和 z 均为默认参数，且 z 的默认值依赖于 x 和 y。我们可以通过不同的参数组合来测试默认参数的使用效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d91a2ea941bf7134095138