ES6 中函数参数默认值的使用方法

ES6 中函数参数默认值的使用方法

ES6 是 JavaScript 的一个重大更新，并且在前端开发中被广泛应用。其中一项重要特性就是函数参数默认值。所谓函数参数默认值，就是在定义函数时，给参数指定一个默认值。当函数被调用时，如果没有传入对应参数，那么该参数就会取默认值。现在让我们来详细了解一下 ES6 中函数参数默认值的使用方法。

基本用法

在 ES6 中，为函数参数指定默认值非常简单。只需要在函数定义时，在需要指定默认值的参数后面使用等号(=)来指定默认值即可。例如：

function test(x, y = 5) {
  return x + y;
}

上面的代码中，y 参数有一个默认值为 5。这意味着当 test 函数被调用时，如果没有传入 y 参数，那么 y 将会等于 5。例如：

test(1); // 6

上面的代码中，当调用 test 函数时，x 参数等于 1，而 y 参数没有被传入，因此 y 参数取默认值 5。最后算出的结果为 6。

注意事项

在使用函数参数默认值时，需要注意以下事项：

1. 如果参数默认值是一个表达式，那么每次调用函数时，表达式都会重新计算一次。例如：

   function test(x, y = Math.random()) {
     return x + y;
   }
   console.log(test(1)); // 输出结果可能不同
   console.log(test(1)); // 输出结果可能不同

   上面的代码中，每次调用 test 函数时，y 参数都会根据 Math.random() 重新取一个随机值。因此，每次输出结果都可能不同。

2. 使用默认值的参数在函数体中不会成为一个单独作用域，而是作为函数体的当前作用域的一部分。例如：

   let x = 1;
   function test(x, y = x) {
     console.log(y);
   }
   test(2); // 输出结果为 2

   上面的代码中，虽然在函数体中使用了 x 参数的默认值，但是此时使用的 x 变量实际上指的是函数体外面的 x 变量。

3. 使用默认值的参数不会改变函数的 length 属性。

参数默认值的应用场景

函数参数默认值在前端开发中的应用场景非常广泛。下面列举几个常见的例子：

1. 初始化参数

   函数参数默认值非常适合用于初始化参数。只需要在定义函数时，给需要初始化的参数设定一个默认值即可。例如：

   function createElement(tagName, options = {}) {
     // ...
   }

   上面的代码中，为 options 参数指定了一个空对象作为默认值。这样，在调用 createElement 函数时，如果不传入 options 参数，函数就会自动使用一个空对象作为默认值。

2. 兼容旧代码

   在将旧的 JavaScript 代码更新到 ES6 时，使用函数参数默认值可以有效的兼容旧代码。例如：

   function test(x, y) {
     y = y || 5;
     return x + y;
   }

   上面的代码中，y || 5 语句用于给 y 参数设定默认值。在 ES6 中，可以直接在函数定义时给 y 参数指定默认值，不需要使用 || 运算符了。

3. 函数重载

   在 JavaScript 中，没有函数重载的概念。但是，我们可以使用函数参数默认值来模拟函数重载。例如：

   function test(x, y = 5) {
     return x + y;
   }
   function test(x) {
     return x;
   }

   上面的代码中，实际上只有一个 test 函数。但是，由于不同参数的默认值不同，所以 test 函数可以有不同的行为表现。

示例代码

下面是一些使用 ES6 中函数参数默认值的示例代码，供大家参考。

示例 1：使用默认值初始化参数

function createElement(tagName, options = {}) {
  let element = document.createElement(tagName);
  element.className = options.className || '';
  element.id = options.id || '';
  element.textContent = options.textContent || '';
  return element;
}

示例 2：使用默认值兼容旧代码

function test(x, y = 5) {
  return x + y;
}

示例 3：使用默认值模拟函数重载

function test(x, y = 5) {
  return x + y;
}
function test(x) {
  return x;
}

总结

函数参数默认值是 ES6 的一个重要特性，在前端开发中被广泛应用。它可以用于初始化参数、兼容旧代码、模拟函数重载等场景。在使用函数参数默认值时，需要注意参数默认值可能会被多次计算、参数默认值不会成为单独作用域、参数默认值不会改变函数的 length 属性等问题。同时，应该尽可能地避免在函数参数默认值中使用可能会有副作用的表达式，以免引发不必要的问题。

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