在 JavaScript 中，函数是一种非常常用的数据类型。函数常常需要接受一些参数，以便在执行时使用。在 ES6 以前，函数的参数只能是必填的，也就是说，如果调用函数时没有传入该参数，就会报错。而在 ES6 中，我们可以使用默认参数来指定函数的默认值。而在 ES12 中，我们又新增了可选参数，让函数参数匹配得更加灵活。
可选参数的语法
在 ES12 中，我们可以使用问号（?）来指定一个参数为可选参数。可选参数必须放在参数列表的最后面，如下所示：
function foo(x: number, y?: number) {
console.log(x, y);
}在上面的代码中，参数 y 是可选参数。如果调用 foo 函数时只传入一个参数，那么 y 的值会是 undefined。如果传入两个参数，那么 y 的值就是传入的值。
可选参数的应用场景
可选参数的应用场景非常广泛，下面我们来看一些常见的应用场景。
函数重载
在 JavaScript 中，函数没有重载的概念，但是我们可以通过函数的参数类型和个数来模拟函数重载。在 ES12 中，我们可以使用可选参数来简化函数重载的实现。例如，我们可以使用可选参数来实现一个函数，该函数可以接受任意个数的参数：
function sum(...args: (number | undefined)[]) {
return args.reduce((prev, curr) => prev + (curr ?? 0), 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4)); // 10
console.log(sum()); // 0在上面的代码中，我们使用了可选参数来实现了一个可以接受任意个数参数的函数。如果传入的参数不是数字类型，那么会被转换成 undefined。
函数参数的默认值
在 ES6 中，我们可以使用默认参数来指定函数参数的默认值。但是默认参数只能在参数列表的最后面，而且不能与可选参数一起使用。在 ES12 中，我们可以使用可选参数来实现函数参数的默认值。例如，我们可以使用可选参数来实现一个函数，该函数可以接受任意个数的参数，并且如果某个参数没有传入，则使用指定的默认值：
function foo(x: number, y?: number, z = 0) {
console.log(x, y, z);
}
foo(1); // 1 undefined 0
foo(1, 2); // 1 2 0
foo(1, 2, 3); // 1 2 3在上面的代码中，我们使用了可选参数来实现了一个可以接受任意个数参数的函数，并且使用了可选参数来指定了参数 z 的默认值为 0。
函数参数的类型检查
在 TypeScript 中，我们可以使用接口来定义函数的参数类型。在接口中，我们可以使用可选属性来定义可选参数。例如，我们可以使用可选属性来定义一个函数的参数类型，该参数可以是一个数字或者是一个字符串：
// javascriptcn.com 代码示例
interface Options {
x: number;
y?: number | string;
}
function foo(options: Options) {
console.log(options.x, options.y);
}
foo({ x: 1 }); // 1 undefined
foo({ x: 1, y: 2 }); // 1 2
foo({ x: 1, y: "hello" }); // 1 "hello"在上面的代码中，我们使用了可选属性来定义了参数 y 的类型，该参数可以是一个数字或者是一个字符串。
总结
在 ES12 中，我们新增了可选参数的语法，让函数参数匹配得更加灵活。可选参数的应用场景非常广泛，例如函数重载、函数参数的默认值和函数参数的类型检查等。在实际开发中，我们可以根据具体的需求来灵活使用可选参数。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6570e4acd2f5e1655d98ed16