现代JavaScript_可选链与空值合并

秋萱君_4083

秋萱君_4083

2025-11-21

447人浏览

原创

可选链(?.)允许安全访问嵌套属性,避免因null/undefined导致的错误;空值合并(??)仅在值为null或undefined时提供默认值,不干扰0、false等假值。两者结合可高效处理不确定数据结构,提升代码健壮性与可读性,是ES2020标配特性。

现代javascript_可选链与空值合并

可选链(Optional Chaining)和空值合并(Nullish Coalescing)是现代 JavaScript 中两个非常实用的特性,它们在处理可能为 null 或 undefined 的值时大大提升了代码的健壮性和可读性。这两个特性在 ES2020 中正式引入,已经成为日常开发中的标配。

可选链:安全访问嵌套属性

在访问深层嵌套对象的属性时,如果某个中间节点为 null 或 undefined,直接访问会抛出错误。传统做法需要层层判断,代码冗长且不易读。

可选链操作符 ?. 允许我们安全地访问嵌套属性。只有当左侧操作数存在时,才会继续访问右侧属性,否则返回 undefined。

例如:

假设有一个用户对象:

const user = { profile: { settings: { theme: 'dark' } } };

使用可选链访问 theme:

user.profile?.settings?.theme; // 'dark'

如果 profile 不存在:

user.profile = null;

user.profile?.settings?.theme; // undefined,不会报错

可选链也适用于方法调用和数组索引:

  • user.method?.() —— 只有 method 存在才调用
  • user.items?.[0] —— 只有 items 存在才取第一个元素

空值合并:精确处理 null 和 undefined

空值合并操作符 ?? 是一个逻辑操作符,当左侧操作数为 null 或 undefined 时,返回右侧操作数;否则返回左侧操作数。

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

这与逻辑或 || 不同,|| 会在左侧为“假值”(如 0、''、false)时触发默认值,而 ?? 只关心 null 和 undefined。

举例说明区别:

const count = 0;

const display1 = count || '无数据'; // '无数据' —— 因为 0 是假值

const display2 = count ?? '无数据'; // 0 —— 因为 0 不是 null 或 undefined

这在设置默认配置、表单字段回退等场景中特别有用。

结合使用:更安全的数据处理模式

可选链和空值合并经常一起使用,形成一种清晰、安全的数据访问模式。

比如从 API 响应中获取用户等级:

const level = userData?.profile?.level ?? '普通用户';

这条语句的意思是:尝试安全访问 level 属性,如果路径中断或值为 null/undefined,则使用默认值。

这种写法避免了多次嵌套判断,也防止了因假值误判导致的默认值覆盖问题。

基本上就这些。掌握可选链和空值合并,能让代码更简洁、更可靠,特别是在处理不确定结构的数据时优势明显。不复杂但容易忽略的是它们的适用边界——记住 ?? 不响应假值,而 ? . 只解决访问异常,不处理类型错误。合理使用,事半功倍。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript java 数据访问

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

2023.09.22

549

3

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

2024.03.01

1698

6

counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.20

3508

5

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2023.09.20

2318

7

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.12.01

2721

7

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

2025.12.22

376

20

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

2026.01.06

417

22

C++ 数据结构与算法实现教程合集
C++ 数据结构与算法实现教程合集

以 C++ 为实现语言,系统讲解核心数据结构与算法,涵盖链表(单链表/双链表/环检测)、栈与队列(单调栈/优先队列)、二叉树(遍历/BST/AVL/红黑树)、哈希表(开地址法/链地址法)、图(邻接表/BFS/DFS/Dijkstra/拓扑排序)、常见排序算法(快排/归并/堆排/计数排序)的实现与复杂度分析,同时分享 LeetCode 刷题技巧、竞赛编程常用模板(二分/前缀和/滑动窗口/动态规划),帮助开发者夯实算法基础。

2026.05.09

472

25

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

2023.07.31

12145

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习