在 ES6/ES2015 中使用默认参数值
在 JavaScript 中，使用函数是很常见的操作。在ES6/ES2015中，我们可以通过使用默认参数值来增加函数的可读性和可维护性。
- 什么是默认参数值？
默认参数值是指函数参数在被调用时如果没有传入值，则会使用预先设置的默认值。这可以避免在函数内部进行参数检查或使用 || 操作符来给参数设定默认值。
在 ES6/ES2015 之前，我们通常需要在函数内部手动检查参数是否有值，然后再根据需要设置默认值：
function greet(name) {
var greeting = 'Hello';
if (typeof name === 'undefined') {
name = 'World';
}
return greeting + ', ' + name + '!';
}在 ES6/ES2015 中，我们可以直接使用默认参数值：
function greet(name = 'World') {
var greeting = 'Hello';
return greeting + ', ' + name + '!';
}- 怎么使用默认参数值？
使用默认参数值的方式非常简单，只需要在函数定义时给参数赋值即可。示例如下：
// javascriptcn.com 代码示例
// 定义一个函数，将两个数字相加，如果 b 为 null 或 undefined，则默认为 0
function add(a, b = 0) {
return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1)); // 1
console.log(add(1, null)); // 1
console.log(add(1, undefined)); // 1在调用 add 函数时，如果不传递第二个参数，则 b 的默认值为 0。
- 默认参数值的规则
当使用默认参数值时，有几个需要注意的规则：
- 如果函数的最后一个参数是可选的（没有指定默认值），那么调用函数时可以省略最后一个参数；
- 如果函数的最后一个参数是有默认值的，那么调用函数时可以省略最后一个参数，此时最后一个参数的值为默认值；
- 如果函数的某个中间参数有默认值，那么调用函数时需要显式地传入一个 undefined 值来让该参数使用默认值。
示例如下：
// javascriptcn.com 代码示例
// 第三个参数没有默认值，可以省略
function func(a, b, c = 1) { ... }
// 第三个参数有默认值，可以省略
function func(a, b, c = 1, d) { ... }
// 第二个和第四个参数有默认值，可以省略
function func(a, b = 1, c = 2, d = 3) { ... }
// 调用时，需显式传入 undefined
func(1, undefined, 2, 3);- 为什么使用默认参数值？
使用默认参数值可以简化函数的定义和调用，提高代码的可读性和可维护性。它可以帮助我们避免各种不必要的判断，并让代码更加清晰和易于理解。
例如，在 React 中可以使用默认参数值来简化组件的定义：
function MyButton({text, onClick = () => {}}) {
return (
<button onClick={onClick}>
{text}
</button>
);
}在使用该组件时，我们可以不传递 onClick 参数：<MyButton text="Click Me" />。这样，组件的使用就变得非常简单和直观，也更加利于组件的复用和修改。
- 总结
在 ES6/ES2015 中，我们可以使用默认参数值来简化函数的定义和调用，同时增加代码的可读性和可维护性。默认参数值的使用规则也非常简单明了，在实际开发中也非常实用。因此，我们应该在 JavaScript 开发中积极地采用这一特性，提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65477d0a7d4982a6eb1d8e77