ECMAScript 2020：使用可选参数传递可选值-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 是一种编程语言规范，也是 JavaScript 的基础规范。每年，ECMA 国际组织都会发布一份新的规范，以改进和增强 JavaScript 的功能。在 2020 年，ECMAScript 迎来了新的版本，也就是 ECMAScript 2020。其中一个崭新的特性就是使用可选参数传递可选值。

可选参数的问题

在 JavaScript 中，函数允许你不必传递所有的参数，在调用函数时省略一些参数是非常常见的行为。然而，如果在函数调用时需要同时指定一个参数的值和另一个参数的默认值，那么在以前的版本中，你必须传递一个占位符作为参数的值，例如：

function multiply(x, y = 1) {
  return x * y;
}

multiply(3, undefined); // => 3
multiply(3, null); // => 0

在上面的例子中，multiply 函数允许你传递一个可选的参数 y，默认值为 1。如果你想使用默认值，需要明确地将 y 设置为 undefined，否则它将被视为 null 或任何其他的值，这可能不是你想要的行为。

解决方案：可选参数

ECMAScript 2020 提供了一种新方式来解决这个问题：可选参数。使用可选参数，你可以在函数声明时指定参数是否是可选的，并在函数体中使用默认值。例如：

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

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

在上面的例子中，我们将 z 参数标记为可选参数，它可以被省略。如果省略了 z 参数，则返回 x * y 的结果；如果传递了 z 参数，则返回 x * y * z 的结果。

可选参数的注意事项

使用可选参数虽然很方便，但也有一些需要注意的事项：

可选参数必须放在参数列表的最后。例如，以下函数定义将会导致语法错误：
```
function test(x?, y) {
  // ...
}
```
在函数体内，可选参数可以被视为 undefined 的值。例如：
```
function test(x?, y) {
  console.log(x); // => undefined
}
```
可选参数与剩余参数不能共存。例如，以下函数定义将会导致语法错误：
```
function test(x?, ...rest) {
  // ...
}
```

可选参数的应用

可选参数不仅方便，而且可以被广泛应用，例如：

函数重载

可选参数可以方便地实现函数重载。例如：

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

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

函数参数配置

可选参数可以方便地实现函数参数的配置。例如：

function configure(options: { x?: number; y?: number; z?: number } = {}) {
  const { x = 0, y = 0, z = 0 } = options;
  // ...
}

configure(); // 使用默认选项
configure({ x: 1, y: 2 }); // 部分配置
configure({ z: 3 }); // 全部配置

函数模拟重载

可选参数可以用于模拟函数重载，以改善 API 的可读性。例如：

function request(url: string, options?: { method?: string; data?: any }): Promise<any> {
  // ...
}

request("/api/users");
request("/api/users", { method: "POST", data: { name: "Alice" }});

总结

ECMAScript 2020 的可选参数特性可以方便地传递可选值，提高了函数的灵活性和可重用性，并且可以解决在以前的版本中的占位符问题。使用可选参数可以实现函数重载、函数参数配置和函数模拟重载等需求。但需要注意的是，可选参数必须放在参数列表的最后，可选参数与剩余参数不能共存，可选参数在函数体内可以被视为 undefined 的值。

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