在前端开发中，经常会遇到需要引用深层次属性（如嵌套对象或数组）的情况，而在访问嵌套属性时，如果中间的属性为空或未定义，就会出现“Cannot read property XXX of undefined”的报错，这给开发带来了很多不便。在 ES11 中，JavaScript 引入了 Optional Chaining Operator，它可以帮助开发者轻松解决这一问题。
Optional Chaining Operator 的基本语法
Optional Chaining Operator 的基本语法很简单，就是在需要访问属性的地方加上“?.”即可。例如，我们可以使用以下语法访问嵌套属性：
const value = obj?.prop1?.prop2?.prop3;
在这个语法中，如果 obj、prop1、prop2 中有任何一个属性是 null 或 undefined，value 将会被赋值为 undefined。
Optional Chaining Operator 的应用
在 React 中访问 props
在 React 中，我们通常从组件的父组件传递 props 给子组件。如果组件需要访问深层次的 props 属性，就需要使用 Optional Chaining Operator。例如：
-- -------------------- ---- ------- -- --- -------- -------- - ----- ---- - - ----- - ----- ------- - -- ------ ------ ----------- --- - -- --- -------- ------------ - ----- ---- - ----------------------- ------ ------------------ -展开代码
在这个例子中，如果我们没有使用 Optional Chaining Operator，当 data.user 为 undefined 时，访问 name 将会出现报错。而使用 Optional Chaining Operator，我们可以轻松地避免这一问题。
在 JavaScript 对象中访问嵌套属性
在 JavaScript 中，我们经常需要访问嵌套对象或数组中的属性，而这些属性在某些情况下可能是 undefined。在这种情况下，使用 Optional Chaining Operator 可以减少错误并提高代码的可读性。例如：
const data = { user: { name: 'Alice' } }; const name = data?.user?.name;
在这个例子中，如果 data.user 为 undefined，name 变量将会被赋值为 undefined，而不会出现报错。
Optional Chaining Operator 的局限性
虽然 Optional Chaining Operator 可以解决访问深层次属性时的问题，但它并不能用于函数的调用。例如，以下的代码将会导致语法错误：
const result = obj?.func();
在这种情况下，我们需要使用其他的技术来处理。
总结
Optional Chaining Operator 是一项非常有用的技术，在访问深层次属性时帮助开发者轻松避免了一些常见的错误。但是需要记住的是，Optional Chaining Operator 并不是万能的，它只能解决属性访问的问题，而不能用于函数的调用。在实际开发中，我们需要灵活应用 Optional Chaining Operator，并结合其他的技术来处理更加复杂的情况。
示例代码
以下是一个使用 Optional Chaining Operator 的示例代码：
const data = { user: { name: 'Alice' } }; const name = data?.user?.name; console.log(name); // 输出：'Alice'
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a13eafadd4f0e0ff958c37
