怎么样使用es6可选链
时间: 2024-02-21 17:36:49 浏览: 20
使用ES6可选链操作符(?.)可以方便地读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。
可选链操作符的语法有以下几种形式:
1. `obj?.prop`:读取连接对象`obj`的属性`prop`的值。如果`obj`为`null`或`undefined`,则返回`undefined`。
2. `obj?.[expr]`:读取连接对象`obj`中`expr`表达式所指示的属性的值。如果`obj`为`null`或`undefined`,则返回`undefined`。
3. `arr?.[index]`:读取数组`arr`中索引为`index`的元素的值。如果`arr`为`null`或`undefined`,则返回`undefined`。
4. `func?.(args)`:调用函数`func`并传入参数`args`。如果`func`为`null`或`undefined`,则返回`undefined`。
下面是一个使用ES6可选链操作符的例子:
```javascript
const person = {
name: 'Alice',
address: {
city: 'New York',
street: '123 Main St'
}
};
const city = person?.address?.city; // 可以安全地读取person.address.city的值
console.log(city); // 输出: 'New York'
const age = person?.age; // person对象没有age属性,返回undefined
console.log(age); // 输出: undefined
```
可以使用可选链操作符来简化多层判断的代码,减少错误和简化处理逻辑。详细的使用方法可以参考引用中的ES6文档和引用中的MDN文档。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>