ES10：学习 JavaScript 中的 “Optional Chaining” 运算符

在 JavaScript 的开发中，我们经常需要操作复杂的对象和嵌套的属性，但是这些属性中有可能会存在未定义或者为 null 的情况，这时候我们使用传统的判断代码会变得十分冗长，而在 ES10 中，新增了一种 “Optional Chaining” 运算符，可以极大的简化我们的代码，使得代码更加易读易维护。

Optional Chaining 运算符

Optional Chaining 运算符使用 ?. 的语法，可以判断属性是否被定义，从而避免运行时的异常。如果属性未定义，则返回 undefined。现在让我们来看看一个简单的例子：

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

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

以上代码判断 myObj.foo.bar 是否被正确定义，并输出 Hello World!。然而，使用 Optional Chaining 可以让代码更加简洁：

let myObj = {
  foo: {
    bar: "Hello World!"
  }
};

console.log(myObj?.foo?.bar);

以上代码使用了 Optional Chaining 运算符，避免了传统的繁琐的判断代码，并输出 Hello World!。

Optional Chaining 运算符的应用

Optional Chaining 运算符不仅可以用在对象上，还可以用在数组、函数的调用等其他场景中。

1. 数组

在读取数组元素时，我们不确定某个元素是否已定义，可以使用 Optional Chaining 进行判断：

let arr = [[1, 2], [3, 4]];

console.log(arr?.[0]?.[1]); // output: 2
console.log(arr?.[1]?.[1]); // output: 4
console.log(arr?.[2]?.[1]); // output: undefined

2. 函数的调用

在调用一个函数时，我们不确定函数是否存在，可以使用 Optional Chaining 进行判断：

let myObj = {
  foo: {
    bar: () => console.log("Hello")
  }
};

myObj?.foo?.bar?.(); // output: "Hello"

在上述代码中，我们避免了在调用函数前进行传统的判断代码。

Optional Chaining 运算符的局限性

虽然 Optional Chaining 运算符使得代码变得更加简洁和易读，但它也有一些局限性：

1. 链中的变量名必须是标示符

Optional Chaining 运算符只适用于链中的属性名是标识符的情况，如果要使用变量名，则需要使用函数调用，如下所示：

let myObj = {
  foo: {
    bar: "Hello World!"
  }
};

let foo = "foo";
console.log(myObj?.[foo]); // output: { bar: "Hello World!" }

2. 不能用于赋值、删除等运算符

Optional Chaining 运算符不能用于赋值、删除等运算符中：

let myObj = {};

myObj?.foo = "Hello World!"; // Error: Invalid left-hand side in assignment
delete myObj?.foo; // Error: Invalid left-hand side in assignment

总结

Optional Chaining 运算符是 ES10 中新增的重要特性之一，在处理复杂的嵌套结构、避免代码冗长的判断语句时有着非常重要的作用。尽管它具有局限性，但它依然是提高代码可读性和可维护性的有效工具。在实际项目中，我们可以灵活运用 Optional Chaining 运算符，使得我们的代码更加简洁、高效。

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