使用 ES9 中的默认参数增强代码可读性

ES9（ECMAScript 2018）是 JavaScript 的最新版本，它引入了一些新特性，其中之一是默认参数。默认参数是一种简化函数参数定义的方法，可以使代码更加简洁和易于阅读。

本文将介绍默认参数的用法和优势，并提供一些示例代码，帮助读者了解如何在自己的代码中使用默认参数。

默认参数的用法

默认参数是在函数定义时为参数提供默认值的一种方式。在以前的 JavaScript 版本中，我们通常需要在函数中手动检查每个参数是否有值，如果没有则为其设置默认值。例如：

-- -------------------- ---- -------
-------- ------------------- ------- -
  -- ------- --- ---------- -
    ------ - -----------
  -
  -- ------- --- ---------- -
    ------ - -----------
  -
  -- ---
-

使用默认参数，我们可以将上面的代码简化为：

function exampleFunc(param1 = 'default1', param2 = 'default2') {
  // ...
}

当调用函数时，如果我们不传递参数值，则使用默认值。如果我们传递了参数值，则使用传递的值。

exampleFunc(); // param1 = 'default1', param2 = 'default2'
exampleFunc('custom1'); // param1 = 'custom1', param2 = 'default2'
exampleFunc('custom1', 'custom2'); // param1 = 'custom1', param2 = 'custom2'

默认参数可以应用于任何类型的参数，包括字符串、数字、对象和函数等。

默认参数的优势

使用默认参数有以下优势：

1. 代码更加简洁：使用默认参数可以减少代码量，并且使代码更加易于阅读和理解。
2. 避免错误：手动检查每个参数是否有值可能会导致遗漏某些参数，从而导致错误。使用默认参数可以避免这种情况。
3. 更好的可维护性：使用默认参数可以使代码更加易于维护，因为它们使函数的行为更加明确和可预测。

示例代码

以下是一些使用默认参数的示例代码：

示例 1：使用默认参数设置数字参数的默认值

function multiply(num1 = 1, num2 = 1) {
  return num1 * num2;
}

multiply(); // 1
multiply(2); // 2
multiply(2, 3); // 6

示例 2：使用默认参数设置字符串参数的默认值

function greet(name = 'World') {
  return `Hello, ${name}!`;
}

greet(); // "Hello, World!"
greet('John'); // "Hello, John!"

示例 3：使用默认参数设置对象参数的默认值

function createUser({ name = 'Anonymous', age = 18 } = {}) {
  return { name, age };
}

createUser(); // { name: 'Anonymous', age: 18 }
createUser({ name: 'John' }); // { name: 'John', age: 18 }
createUser({ name: 'Mary', age: 25 }); // { name: 'Mary', age: 25 }

示例 4：使用默认参数设置函数参数的默认值

function callMeMaybe(callback = () => {}) {
  callback();
}

callMeMaybe(); // nothing happens
callMeMaybe(() => console.log('Hello, World!')); // "Hello, World!"

结论

默认参数是一种简化函数定义的方法，可以使代码更加简洁和易于阅读。使用默认参数可以减少代码量、避免错误，并使函数的行为更加明确和可预测。希望本文能够帮助读者更好地理解和应用默认参数。

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