JavaScript 空值合并运算符（Nullish Coalescing Operator）详解

最新推荐文章于 2025-11-23 16:56:34 发布
最新推荐文章于 2025-11-23 16:56:34 发布
阅读量25 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 杂项个人笔记 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/banxia_frontend/article/details/153419486

JavaScript 空值合并运算符（Nullish Coalescing Operator）详解

什么是空值合并运算符

空值合并运算符（??）是一个逻辑运算符，用于检查值是否为 null 或 undefined。如果是，则返回备选值；否则返回原始值。

表达式 a ?? b 等价于：

(a !== null && a !== undefined) ? a : b

基本用法


                

                
                
        

    

  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
ES6新增的运算符：Optional Chaining Operator和Nullish Coalescing Operator

				
			

			

				

					SvqiAnaconda的博客
				

				

					09-13
					
					176
					
				

			

		

		

			
				
在ES6中，引入了一些新的运算符，其中包括链判断运算符（Optional Chaining Operator）和null判断运算符（Nullish Coalescing Operator）。ES6的链判断运算符（?链判断运算符可以简化对嵌套对象属性的访问，避免因为属性不存在而引发错误。在上面的示例中，我们使用null判断运算符为变量提供了默认值。以上是ES6新增的链判断运算符和null判断运算符的详细介绍和使用示例。需要注意的是，链判断运算符只能在对象链中的最后一项使用，不能用于函数调用或数组索引。

			
		

	



                

            
              



	

		

			

				
					
ES6+空值合并运算符：更安全的默认值设置

				
			

			

				

					小白菜的博客
				

				

					07-04
					
					1092
					
				

			

		

		

			
				
本文旨在帮助开发者理解空值合并运算符的核心价值，掌握其在变量赋值、函数参数、对象属性等场景中的应用。覆盖语法解析、使用技巧、底层原理及最佳实践。（图：文档知识图谱）Falsy值：在布尔判断中被当作false的值，包括false0""nullundefinedNaNNullish值：特指null和undefined短路求值：逻辑运算中当左操作数足以决定结果时，不再计算右操作数的机制核心概念回顾??运算符精准处理null/undefined避免对0、“”、false等有效值的误覆盖与可选链?

			
		

	



              


  
              

                


	

		

			

				
					
详解JavaScript的空值合并运算符

				
			

			

				

					qq_38261819的博客
				

				

					04-21
					
					2257
					
				

			

		

		

			
				
今年ECMAScript 2020（ES2020）将发布！自 2015 年 ECMAScript 2015（ES6）发布以来，我们每年都对 JavaScript 语言进行更新。

目录

使用 JavaScript 空值合并运算符
	使用实例
	空值合并运算符与逻辑或（||）
	浏览器支持
	总结
在ES2020中，我们获得了在其他语言中（ 如 C# 和 PHP）早已可用的功能：空值合并运算符。我一直喜欢这个名字，因为每当我说这个名字时，都会觉得自己很聪明。

空值合并运算符将会遍历列表，并返回第一个不是 

			
		

	





	

		

			

				
					
深入理解 JavaScript的空值合并运算符（提升代码精确性）

				
			

			

				

					weixin_43172311的博客
				

				

					07-03
					
					1414
					
				

			

		

		

			
				
在前端开发中，处理变量默认值是一个常见需求。传统的 `||` 运算符虽然简单易用，但在某些场景下会带来意外的行为。`ES2020 (ES11)` 引入的**空值合并运算符**（Nullish Coalescing Operator）`??` 为我们提供了更精确的控制方式。本文将全面解析这一特性，从基础知识到实际应用，帮助你掌握这一现代 JavaScript/TypeScript 的重要语法。

			
		

	



		

			
		



	

		

			

				
					
详解空值合并运算符

				
			

			

				

					weixin_50939386的博客
				

				

					05-01
					
					2331
					
				

			

		

		

			
				
空值合并运算符到底是什么



是javaScript新增的运算符


空值合并运算符（nullish coalescing operator）的写法为两个问号 ??
a ?? b 的结果是：

如果 a 是已定义的，则结果为 a，
如果 a 不是已定义的，则结果为 b。

换句话说，如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。


我们换成三元运算符的使用逻辑重写result = a ?? b来进一步了解
result = (a !== null...

			
		

	





	

		

			

				
					
Terser空值合并运算符：nullish.js优化??与??=操作符

				
			

			

				

					gitblog_00185的博客
				

				

					10-24
					
					324
					
				

			

		

		

			
				
在JavaScript开发中，处理变量默认值时你是否还在使用`||`运算符？这个常见做法存在隐藏陷阱——当遇到0、''或false等假值时会错误覆盖有效值。Terser的[nullish.js](https://link.gitcode.com/i/5aac0b2824a5cb03c6a241cf38a57255)模块通过优化ES2020引入的空值合并运算符（Nullish Coalescing ...

			
		

	





	

		

			

				
					
JavaScript ?? 运算符详解

				
			

			

				

					学习,你不是一个人在战斗      ～ 961302305（QQ,微信）
				

				

					04-22
					
					903
					
				

			

		

		

			
				
??运算符用于提供一个默认值，当其左侧的值为null或undefined时，返回右侧的默认值。它不会像||运算符那样将其他“假值”当作null或undefined处理，因此可以避免一些意外的行为。在实际开发中，它主要用于处理可能为null或undefined的值，并为其提供一个更合理的默认值。

			
		

	





	

		

			

				
					
JavaScript进阶（二十六）：ES各版本特性详解

				
			

			

				

					IT全栈 华强工作室
				

				

					10-13
					
					4514
					
				

			

		

		

			
				
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准，但实际上后两者是ECMA-262标准的实现和扩展。

			
		

	





	

		

			

				
					
【JavaScript】双问号（??）操作符详解

				
			

			

				

					lph159的博客
				

				

					04-28
					
					7935
					
				

			

		

		

			
				
空值合并操作符  是一种逻辑运算符，用于在左侧表达式的值为  或  时，返回右侧的默认值。简单来说，就是：

 是要检查的值；
 是当  为  或  时使用的默认值；
最终  的值是  或 ，取决于  是否为  或 。

3. 简单示例

在这个例子中，因为  是 ，所以最终  赋值为右侧的 “匿名用户”。如果  有一个实际的值，比如：
那么就直接使用  的值，不使用默认值。在  出现之前，我们常常用逻辑或  来处理默认值，比如：
问题是， 会把**所有假值（falsy value）**都当成无效，包括：上

			
		

	





	

		

			

				
					
??运算符在js代码中是什么作用

				
			

			

				

					04-19
				

			

		

		

			
				
空值合并运算符（Nullish Coalescing Operator）是ES2020引入的特性，专门用于处理`null`和`undefined`两种特殊值。其核心功能可以概括为： $$leftExpr ?? rightExpr$$ 当左侧表达式结果为`null`或`undefined`时，...

			
		

	





	

		

			

				
					
ES2020新特性详解：可选链操作符与更多

				
			

			

				

					
				

			

		

		

			
				
2. 空值合并运算符（Nullish Coalescing Operator）：`??`  当我们想要提供一个默认值，但又希望区别于`null`和`undefined`时，空值合并运算符就派上用场了。如果左侧的表达式是`null`或`undefined`，则返回右侧的值...

			
		

	





	

		

			

				
					
SSM企业物资管理系统h3109(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上，文末可获取，系统界面在最后面

				
			

			

				

					2509_93102542的博客
				

				

					11-21
					
					757
					
				

			

		

		

			
				
在技术实现上，国外多采用成熟的开发框架和技术架构，注重系统的安全性、稳定性和可扩展性，同时积极融入大数据、人工智能等新技术，实现物资需求预测、智能库存优化等功能。基于此，开发一套基于SSM框架的企业物资管理系统，整合部门、员工、物资及各类业务流程管理功能，实现物资管理的数字化、规范化和高效化，成为解决企业物资管理痛点的必然需求。本课题旨在开发一套基于SSM框架的企业物资管理系统，围绕部门、员工、物资信息、物资申请、消息提醒、物资归还、物资入库、意见反馈八大核心功能模块，实现企业物资管理的全流程数字化。

			
		

	





	

		

			

				
					
React社区

					
最新发布

				
			

			

				

					2509_93942966的博客
				

				

					11-23
					
					196
					
				

			

		

		

			
				
这种混乱中带着生命力的讨论，特别像早年中关村攒机市场——商家喊着不同配置的优劣，而真正懂行的玩家早就摸清了哪个方案最适合自己的项目。但有意思的是，无论工具链怎么变，React核心团队始终稳如老狗——他们宁可把并发特性在实验阶段晾三年，也不愿重蹈Angular断代升级的覆辙。组件库生态更是百花齐放。这种带着口音的技术交流，反而比标准教科书更能体现社区的活力。或许某天你写在Stack Overflow的答案，就会成为某个巴西程序员解决线上故障的关键——这种跨越时区的知识接力，才是技术社区最浪漫的部分。

			
		

	





	

		

			

				
					
JavaScript案例

				
			

			

				

					2509_93942579的博客
				

				

					11-21
					
					303
					
				

			

		

		

			
				
这段代码遍历用户数组，为每个用户创建li元素，并添加到ul列表中。经常遇到动态添加的元素无法绑定事件的问题，比如一个任务列表，每个任务项有个删除按钮。如果给每个按钮单独绑事件，新加的按钮就没反应。这时事件委托就派上用场了，我们把事件绑在父容器上，通过事件冒泡来管理。这些案例都是我在项目中踩过坑后总结的，可能不是最优解，但实测有效。这个debounce函数返回一个新函数，在delay毫秒内如果重复调用，会清除之前的定时器，重新计时。这样只有用户停止输入300毫秒后，才会触发搜索操作，有效减少不必要的请求。

			
		

	





	

		

			

				
					
Vue3 中 ECharts Tooltip 无法显示？问题根源与解决方案

				
			

			

				

					weixin_41940856的博客
				

				

					11-21
					
					471
					
				

			

		

		

			
				
Vue3 中 ECharts Tooltip 无法显示的核心问题是使用ref深度代理 ECharts 实例，导致其内部事件机制失效。通过将ref替换为shallowRef，既能保持实例的响应式引用，又不会破坏其内部结构，是最简单高效的解决方案。在 Vue3 中集成第三方库时，需注意响应式 API 的选择：复杂实例用shallowRef，普通数据对象用refreactive，避免因响应式代理引发的隐性问题。

			
		

	





	

		

			

				
					
JavaScript函数式编程库

				
			

			

				

					2509_93941656的博客
				

				

					11-21
					
					312
					
				

			

		

		

			
				
但要注意，Lodash的FP版不是完全纯函数式，像这种带副作用的函数需要小心使用。这时候，专门的函数式库就能派上用场了，它们把常用操作封装成纯函数，让代码更模块化、可测试性也更强。我最近用Ramda重写了一个数据看板的过滤模块，原本200行的代码缩到50行，而且单元测试覆盖率直接涨到90%——因为每个函数都是无状态的，测起来只需要丢输入验输出就行。Ramda是我个人最推荐的，它的设计完全围绕“函数优先、数据最后”的原则。Ramda的每个函数都自动柯里化，能轻松组合出新功能，比如用把多个操作串成流水线。

			
		

	





	

		

			

				
					
React数据分析

				
			

			

				

					2509_93947330的博客
				

				

					11-23
					
					104
					
				

			

		

		

			
				
用React DevTools的Profiler分析组件渲染时间，发现有个表格组件因为内联样式导致重复渲染。把数据都塞到Context里会导致不必要的重渲染。上次我把用户信息和主题设置放在同一个Context里，结果切换主题时所有用到用户信息的组件都重渲染了。React数据处理最关键的就是要根据业务场景选择合适的方案，小项目用useState足够，复杂场景就得考虑状态管理库了。记住一个原则：避免不必要的渲染和计算，该缓存时一定要缓存。比如快速切换标签页时，后发的请求可能先返回，导致数据显示错乱。

			
		

	





	

		

			

				
					
JavaScript移动应用案例

				
			

			

				

					2509_93946509的博客
				

				

					11-21
					
					306
					
				

			

		

		

			
				
客户想要一个轻量级的社区平台，重点在消息推送和实时交互。Ionic 的 Cordova 插件帮了大忙，比如用相机插件实现图片上传，用地理位置插件做附近的用户推荐。数据库方面，我们选了 Firebase 作为后端，它的实时同步功能和 JavaScript SDK 无缝集成，省去了自己搭服务器的麻烦。这个项目的亮点是插件生态——我们自定义了一个文件导出插件，把任务列表生成 Excel，员工反馈很实用。不过，PhoneGap 的性能瓶颈明显，在低端设备上偶尔卡顿，我们通过减少 DOM 操作和压缩资源缓解了问题。

			
		

	





	

		

			

				
					
JavaScript人工智能

				
			

			

				

					2509_93942294的博客
				

				

					11-21
					
					354
					
				

			

		

		

			
				
举个例子，假如你想做个简单的图像分类器，识别猫和狗，可以先用预训练模型快速上手。实践出真知，动手写点代码，你会发现JavaScript不只是网页脚本，还能玩出很多花样。训练过程可能会慢点，尤其是在低配置设备上，但TensorFlow.js提供了异步操作，不会阻塞页面渲染。另外，JavaScript生态虽然丰富，但和Python比，社区支持还是弱一些，遇到问题得自己多调试。重点是，它完全在客户端运行，减少了服务器压力，还提升了用户体验——用户上传图片后，立刻就能看到结果，不用等网络请求。

			
		

	





	

		

			

				
					
React日志

				
			

			

				

					2509_93945640的博客
				

				

					11-23
					
					186
					
				

			

		

		

			
				
最后总结下今天的收获：组件状态该提升时就提升，复杂状态优先考虑 useReducer，性能优化要用 memo 和 callback，深层传递可以用 Context。另外还发现个细节：如果传递的 onToggle 回调函数是用 inline function 写的，那 memo 就白用了，因为每次渲染都会创建新的函数引用。结果产品经理说要加个“全部展开/全部收起”的功能，我当场就傻眼了。用 useReducer 之后，状态逻辑更清晰了，特别是处理“全部展开”这种批量操作的时候，代码看起来舒服多了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
算法大师

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值