在 ES6 中使用默认参数处理函数参数缺失或 undefined 情况

在编写 JavaScript 函数时，我们经常需要处理函数参数缺失或 undefined 的情况。在 ES6 中，我们可以使用默认参数（Default Parameters）来简化这个过程。

默认参数的语法

默认参数是在函数定义时指定的，它们在函数被调用时可以被省略。默认参数的语法如下：

function myFunction(param1 = defaultValue1, param2 = defaultValue2, ...) {
  // 函数体
}

在这个语法中，param1、param2 等是函数的参数名，defaultValue1、defaultValue2 等是默认值。如果在函数调用时省略了这些参数，它们将被赋值为对应的默认值。

默认参数的应用

处理函数参数缺失或 undefined

默认参数最常用的场景就是处理函数参数缺失或 undefined 的情况。例如，我们有一个函数用于计算两个数的和：

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

如果调用 sum() 函数时不传入参数，那么 a 和 b 都将被赋值为 undefined，这时计算结果将是 NaN。为了避免这种情况，我们可以使用默认参数：

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

现在，如果调用 sum() 函数时不传入参数，a 和 b 将被赋值为默认值 0，计算结果将是 0。

可选参数的处理

有些函数可能需要接受可选参数，这些参数不是必需的，但是在某些情况下可能需要用到。在 ES5 中，我们通常使用下面的方法来实现可选参数：

function myFunction(param1, param2) {
  param1 = param1 || defaultValue1;
  param2 = param2 || defaultValue2;
  // 函数体
}

这种方法虽然能够实现可选参数的效果，但是存在一些问题。例如，如果 param1 的值为 0 或者空字符串，那么 param1 || defaultValue1 的结果将是 defaultValue1，这可能不是我们想要的。

在 ES6 中，我们可以使用默认参数来实现可选参数的处理，这样就能避免上述问题：

function myFunction(param1 = defaultValue1, param2 = defaultValue2) {
  // 函数体
}

这个函数可以接受两个可选参数 param1 和 param2，如果调用时不传入这些参数，它们将被赋值为默认值 defaultValue1 和 defaultValue2。

示例代码

下面是一个使用默认参数处理函数参数缺失或 undefined 的例子：

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

greet(); // Hello, World!
greet('Alice'); // Hello, Alice!

这个函数用于向用户打招呼，如果调用时不传入参数，name 将被赋值为默认值 'World'。

下面是一个使用默认参数处理可选参数的例子：

function format(str, options = {}) {
  const { prefix = '[', suffix = ']' } = options;
  return `${prefix}${str}${suffix}`;
}

console.log(format('Hello')); // [Hello]
console.log(format('Hello', { prefix: '<', suffix: '>' })); // <Hello>

这个函数用于格式化字符串，可选参数 options 包含两个属性 prefix 和 suffix，默认值分别为 '[' 和 ']'。如果调用时不传入 options，它将被赋值为一个空对象 {}。在函数体内，我们使用解构赋值来获取 prefix 和 suffix 的值，如果调用时传入了这些属性，它们将被覆盖为对应的值，否则将使用默认值。

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