在前端开发过程中，经常会遇到访问 undefined 属性的错误。为了避免这些错误，我们通常需要在代码中添加许多的判断语句。ES12 可空链式调用「?.」这一新特性的出现，为我们解决了这一问题，极大地简化了代码的编写。
ES12 可空链式调用「?.」的使用
在 ES12 中，我们可以使用「?.」来进行可空链式调用。其用法如下：
obj?.prop // 如果 obj 存在，则返回 obj.prop，否则返回 undefined。
这里的「?.」代表了一个新的语法，可以帮我们避免访问 undefined 属性时出现的错误。在使用这一语法时，只需要在访问可能出错的属性后面添加「?.」即可。
为什么使用可空链式调用「?.」
在前端开发中，经常会出现访问 undefined 属性的问题。这个问题常常源于我们不确定某个对象是否存在，或者某个对象中的某个属性是否存在。如果我们访问了这样的属性，就会出现 undefined，这会导致整个应用程序崩溃。
这个问题十分常见，因此许多开发者都在代码中添加大量的判断语句。例如：
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
// do something
}这些判断语句既麻烦又容易出错，而可空链式调用「?.」的出现，为我们解决了这一问题。
使用可空链式调用「?.」时，我们不必再编写大量的判断语句，代码变得更加简洁易懂。例如：
if (obj?.prop1?.prop2?.prop3) {
// do something
}这里的代码更加简洁，同时也更加易读。
可空链式调用「?.」的应用
可空链式调用「?.」不仅可以应用在访问对象中某个可能不存在的属性上，还可以应用在调用对象的方法时。例如：
obj?.method()
如果 obj 存在，则调用 obj.method()，否则返回 undefined。
这对于调用可能不存在的方法时十分有用。我们无须再添加大量的判断语句，代码变得更加简洁易懂。
另外，在处理数组时也可以使用可空链式调用「?.」。例如：
arr?.[0]?.prop
这里的 [0] 表示访问数组的第一个元素，「?.」则表示在访问该元素时，如果该元素不存在，将直接返回 undefined，不必再添加大量的判断语句。
示例代码
让我们看一个具体的例子。假设我们有一个对象，它可能包含一个 name 属性和一个 age 属性。我们想要使用可空链式调用来获取这些属性，如果属性不存在则返回 undefined。代码如下：
const obj = { age: 18 };
console.log(obj?.name); // undefined
console.log(obj?.age); // 18这里我们使用了可空链式调用「?.」来获取 name 和 age 这两个属性。由于 obj 对象中并没有 name 属性，因此第一句代码返回了 undefined；而 age 属性存在，因此第二句代码返回了 18。
总结
通过使用 ES12 可空链式调用「?.」，我们可以避免访问 undefined 属性时出现的错误，同时也能够让代码变得更加简洁易懂。在开发过程中，我们可以根据具体需求进行灵活应用，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c9c8e968c7c53b0f0a393