JS使用可选链操作符 (?.) 进行空值检查的操作

更新时间：2024年12月06日 11:19:16 作者：aloha_

在 JavaScript 中,处理嵌套对象或数组时,经常会遇到空值检查的问题,传统的空值检查通常比较繁琐,容易导致代码冗长且难以阅读,ES2020 引入了可选链操作符 (?.),极大地简化了这些检查过程,本文介绍了JS使用可选链操作符 (?.) 进行空值检查的操作

传统空值检

假设我们有一个嵌套的对象结构，想要访问 user.address.city，但不确定 user、address 或 city 是否存在。传统的空值检查方法如下：

let city = null;
if (user && user.address && user.address.city) {
  city = user.address.city;
}

// let city = user ? (user.address ? user.address.city : null) : null;

这些方法不仅冗长，而且容易出错.

使用可选链操作符 (?.)

可选链操作符 (?.) 提供了一种更简洁的方式来处理这些情况。它允许我们在访问对象属性之前检查对象是否存在，从而避免运行时错误。

基本用法

let city = user?.address?.city;

如果 user 或 address 为 null 或 undefined，整个表达式会短路并返回 undefined，而不会抛出错误。

示例

假设我们有以下对象结构：

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "Wonderland"
  }
};

使用可选链操作符访问 city：

let city = user?.address?.city; // "Wonderland"
let country = user?.address?.country; // undefined

处理数组

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

let secondUserAge = users[1]?.age; // 30
let thirdUserAge = users[2]?.age; // undefined

结合函数调用

const obj = {
  method: function() {
    return "Hello";
  }
};

let result = obj?.method(); // "Hello"
let nonExistentResult = obj?.nonExistentMethod(); // undefined

优点

简洁性: 减少了代码量，提高了可读性。
安全性: 避免了因访问不存在的属性而导致的运行时错误。
灵活性: 可以方便地处理复杂的嵌套结构

总结

可选链操作符 (?.) 是 ES2020 引入的一个强大特性，它简化了空值检查的过程，提高了代码的安全性和可读性。在现代 JavaScript 开发中，合理使用可选链操作符可以显著减少潜在的错误，并使代码更加简洁优雅。

注意事项

可选链操作符只能用于访问属性或调用方法，不能用于赋值。在某些旧版本的浏览器或环境中可能不支持，需要使用 Babel 等工具进行转译。

到此这篇关于JS使用可选链操作符 (?.) 进行空值检查的操作的文章就介绍到这了,更多相关JS可选链操作符空值检内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解JavaScript中的属性和特性
本文对JavaScript中对象的本质、对象与类的关系、对象与引用类型的关系;对象属性如何进行分类;属性中特性进行介绍。感兴趣的朋友可以看下
2016-12-12
Javascript中匿名函数的多种调用方式总结
这篇文章主要是对Javascript中匿名函数的多种调用方式进行了详细的总结介绍。需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
bootstrap select下拉搜索插件使用方法详解
这篇文章主要为大家详细介绍了bootstrap select下拉搜索插件的使用方法，动态加载自己数据的二级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
JavaScript判断是否为数字的几种方式汇总(推荐!)
有时候需要根据输入的内容来进行计算,这个时候就需要判断输入的内容是否是数字,下面这篇文章主要给大家介绍了关于JavaScript判断是否为数字的几种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-06-06
微信小程序组件通信和behavior使用详解
behaviors是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”，这篇文章主要介绍了微信小程序组件通信和behavior使用,需要的朋友可以参考下
2022-08-08
详解webpack的clean-webpack-plugin插件报错
这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
JavaScript控制音频和视频的播放、暂停、音量
HTML<video>元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放,你也可以将<video>标签用于音频内容,在前端中实现音频和视频播放通常涉及使用HTML5的<audio>和<video>元素以及JavaScript来控制这些媒体元素的播放、暂停、音量等属性
2023-10-10
浅谈鸿蒙 JavaScript GUI 技术栈
众所周知，刚刚开源的「鸿蒙 2.0」以 JavaScript 作为 IoT 应用开发的框架语言。作为科普，这篇文章不会拿着放大镜找出代码中的槽点来吹毛求疵，而是希望通俗地讲清楚它所支持的 GUI 到底是怎么一回事。
2020-09-09
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
本文给大家介绍分别使用js和c#两种语言实现根据百度地图计算出两地之间的驾驶距离，需要用户指定出发城市和到达城市。对百度地图计算两地距离感兴趣的朋友可以参考下本篇文章
2015-10-10
js自定义事件及事件交互原理概述(二)
上一篇的目的只是让大家简单的理解自定事件是如何模拟出来的，大家不难发现会有很多缺陷,本篇主要已解决上一篇的问题为主，感兴趣的朋友可以参考，或许本文对你有所帮助
2013-02-02