如何使用 ECMAScript 2020（ES11）中的可选参数？-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2020（ES11）中，新增了一项非常实用的语言特性：可选参数（Optional Chaining）。这个特性可以帮助我们更加方便地处理对象属性的访问，避免了一些繁琐的判断和处理，提高了代码的简洁性和可读性。

可选参数的基本语法

可选参数的语法很简单，就是在对象属性的访问中加上一个问号（?）：

const result = obj?.prop;

这里的 obj 是一个对象，prop 是该对象的一个属性。如果 obj 存在且 prop 存在，则返回该属性的值；否则返回 undefined。

在上面的语法中，问号（?）就是可选参数的标识符，表示该参数可以不存在。需要注意的是，问号（?）只能出现在点操作符（.）和方括号操作符（[]）之后，不能出现在其他位置。

可选参数的应用场景非常广泛，例如：

在处理嵌套对象时，我们经常需要判断每一层对象是否存在，才能安全地访问其属性。例如：

const result = obj && obj.prop && obj.prop.subprop && obj.prop.subprop.value;

这里的 obj 是一个对象，prop 是该对象的一个属性，subprop 是 prop 的一个属性，value 是 subprop 的一个属性。如果这些属性都存在，则返回 value 的值；否则返回 undefined。

使用可选参数可以简化这个判断过程，例如：

const result = obj?.prop?.subprop?.value;

这里的问号（?）表示如果 obj、prop、subprop 存在，则返回 value 的值；否则返回 undefined。

在处理函数参数时，我们经常需要判断参数是否存在，才能安全地调用该参数的方法或访问其属性。例如：

function foo(options) {
  const x = options && options.x;
  if (x) {
    // do something with x
  }
}

这里的 foo 函数接收一个 options 参数，该参数是一个对象，包含一个 x 属性。如果 options 存在且 x 存在，则执行一些操作。

使用可选参数可以简化这个判断过程，例如：

function foo(options) {
  const x = options?.x;
  if (x) {
    // do something with x
  }
}

这里的问号（?）表示如果 options 存在且 x 存在，则执行一些操作。

在使用可选参数时，需要注意以下几点：

可选参数只能用于对象属性的访问，不能用于函数调用、模板字符串、数组访问等其他语法中。

例如，下面的代码是错误的：

const result = fn?.();
const str = `Hello, ${name?.toUpperCase()}!`;
const item = arr?[0];

可选参数只能用于读取属性，不能用于赋值操作。

例如，下面的代码是错误的：

obj?.prop = value;

可选参数不能用于函数调用，如果需要调用一个对象的方法，仍然需要判断该对象是否存在。

例如：

obj?.method(); // 错误！

应该改为：

obj && obj.method();

目前，可选参数还不是所有浏览器都支持的特性，需要使用 Babel 等工具进行转译。如果需要使用可选参数，请确保你的项目已经配置了相应的转译工具。

可选参数是 ECMAScript 2020（ES11）中的一项非常实用的语言特性，可以帮助我们更加方便地处理对象属性的访问，避免了一些繁琐的判断和处理，提高了代码的简洁性和可读性。在使用可选参数时，需要注意其语法和限制，以及浏览器的兼容性。

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