ES6 中的默认参数使用技巧-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的默认参数是一种非常有用的特性，它可以让我们在定义函数时，给函数的参数设置默认值，从而简化代码，提高代码的可读性和可维护性。本文将为大家介绍 ES6 中默认参数的使用技巧，帮助大家更好地掌握这一特性。

默认参数的基本使用

在 ES6 中，我们可以通过在函数定义时给参数赋值来设置默认参数。例如：

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

greet(); // 输出：Hello, World!
greet('Alice'); // 输出：Hello, Alice!

在上面的代码中，我们定义了一个 greet 函数，并给 name 参数设置了默认值为 'World'。当我们不传递参数调用函数时，name 参数将会取默认值 'World'；当我们传递参数 'Alice' 调用函数时，name 参数将会取传入的值。

默认参数的注意事项

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

1. 默认参数只能用在最后

默认参数只能用在函数参数列表的最后，不能在中间或者前面。例如：

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

greet('Hello'); // 报错：Missing message parameter

在上面的代码中，我们尝试给 name 参数设置默认值，并将 message 参数放在了后面，但是当我们调用函数时只传入了一个参数 'Hello'，程序会报错提示缺少 message 参数。这是因为我们将默认参数放在了中间，导致程序无法确定参数的位置。

2. 默认参数的值是惰性求值的

默认参数的值是惰性求值的，即它们在函数被调用时才会被求值。例如：

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

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

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

在上面的代码中，我们定义了一个 add 函数，并给 b 参数设置了默认值为 count++。当我们第一次调用函数时，count 的值为 0，因此 b 参数取默认值 0，结果为 1；当我们第二次调用函数时，count 的值为 1，因此 b 参数取默认值 1，结果为 2；当我们第三次调用函数时，我们传入了参数 2，因此 b 参数取传入的值 2，结果为 3。

3. 默认参数不会影响 `arguments` 对象

默认参数不会影响 arguments 对象，即在函数内部，arguments 对象的长度和实际传入的参数个数是相同的。例如：

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

greet(); // 输出：Hello, World! arguments.length: 0
greet('Alice'); // 输出：Hello, Alice! arguments.length: 1

在上面的代码中，我们在 greet 函数内部打印了 arguments.length，并分别调用了不传参和传入 'Alice' 的两种情况。可以看到，不管我们是否传入参数，arguments.length 的值都是正确的。

默认参数的高级用法

除了基本用法外，ES6 中的默认参数还有一些高级用法，可以帮助我们更好地利用这一特性，提高代码的效率和可读性。

1. 默认参数与解构赋值结合使用

默认参数与解构赋值结合使用可以让我们更方便地处理对象和数组类型的参数。例如：

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

greet({}); // 输出：Hello, World!
greet({ name: 'Alice' }); // 输出：Hello, Alice!
greet({ message: 'Hi' }); // 输出：Hi, World!
greet({ name: 'Bob', message: 'Hey' }); // 输出：Hey, Bob!

在上面的代码中，我们定义了一个 greet 函数，并使用解构赋值来获取传入的参数对象中的 name 和 message 属性。当传入的参数对象没有对应属性时，name 和 message 参数将取默认值 'World' 和 'Hello'；当传入的参数对象只有部分属性时，缺失的属性将取默认值；当传入的参数对象有完整的属性时，将使用传入的值。

2. 默认参数与箭头函数结合使用

默认参数与箭头函数结合使用可以让我们更方便地定义一些简单的函数。例如：

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

greet(); // 输出：Hello, World!
greet('Alice'); // 输出：Hello, Alice!

在上面的代码中，我们使用箭头函数定义了一个 greet 函数，并给 name 参数设置了默认值为 'World'。由于箭头函数可以省略 return 关键字，因此我们可以直接在箭头函数的代码块中输出结果。

总结

ES6 中的默认参数是一种非常实用的特性，它可以让我们更方便地定义函数，并提高代码的可读性和可维护性。在使用默认参数时，我们需要注意默认参数只能用在最后，默认参数的值是惰性求值的，以及默认参数不会影响 arguments 对象。除了基本用法外，我们还可以将默认参数与解构赋值和箭头函数结合使用，从而更好地利用这一特性。

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

ES6 中的默认参数使用技巧