分享几个JavaScript运算符的使用技巧

ECMAScript发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变JavaScript编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符，AND和OR运算符，这些运算符的出现，也是希望让我们的代码更干净简洁，下面分享几个优雅的JavaScript运算符使用技巧

一、可选链接运算符【？.】

可选链接运算符（Optional Chaining Operator）处于ES2020提案的第4阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。它也可以作为TypeScript 3.7+中的功能使用。

相信大部分开发前端的的小伙伴们都会遇到null和未定义的属性。JS语言的动态特性使其无法不碰到它们。特别是在处理嵌套对象时，以下代码很常见：

				?

									if (data && data.children && data.children[0] && data.children[0].title) {

									    // I have a title!

									}

上面的代码用于API响应，我必须解析JSON以确保名称存在。但是，当对象具有可选属性或某些配置对象具有某些值的动态映射时，可能会遇到类似情况，需要检查很多边界条件。

这时候，如果我们使用可选链接运算符，一切就变得更加轻松了。它为我们检查嵌套属性，而不必显式搜索梯形图。我们所要做的就是使用“？” 要检查空值的属性之后的运算符。我们可以随意在表达式中多次使用该运算符，并且如果未定义任何项，它将尽早返回。

对于静态属性用法是：

				?

									object?.property

对于动态属性将其更改为：

				?

									object?.[expression]

上面的代码可以简化为：

let id="codetool">



	然后，如果我们有:

	
		
			
				?
			
				
					
						
							
								1
							
								2
							
								3
							
								4
							
								5
						
						
							
								
									let data;
								
									console.log(data?.children?.[0]?.title) // undefined
								
									 
								
									data  = {children: [{title:'codercao'}]}
								
									console.log(data?.children?.[0]?.title) // codercao
							
						
					
				
			
		
	
	
		
			
	


	这样写是不是更加简单了呢？ 由于操作符一旦为空值就会终止，因此也可以使用它来有条件地调用方法或应用条件逻辑

	
		
			
				?
			
				
					
						
							
								1
							
								2
							
								3
							
								4
							
								5
						
						
							
								
									const conditionalProperty = null;
								
									let index = 0;
								
									 
								
									console.log(conditionalProperty?.[index++]); // undefined
								
									console.log(index);  // 0
							
						
					
				
			
		
	
	
		
			
	


	对于方法的调用你可以这样写

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									object.runsOnlyIfMethodExists?.()
							
						
					
				
			
		
	
	
		
			
	


	例如下面的parent对象，如果我们直接调用parent.getTitle(),则会报Uncaught TypeError: parent.getTitle is not a function错误，parent.getTitle?.()则会终止不会执行

	
		
			
				?
			
				
					
						
							
								1
							
								2
							
								3
							
								4
							
								5
							
								6
							
								7
							
								8
							
								9
							
								10
							
								11
						
						
							
								
									let parent = {
								
									    name: "parent",
								
									    friends: ["p1", "p2", "p3"],
								
									    getName: function() {
								
									      console.log(this.name)
								
									    }
								
									  };
								
									  
								
									  parent.getName?.()   // parent
								
									  parent.getTitle?.()  //不会执行
								
									 
							
						
					
				
			
		
	
	
		
			
	


	与无效合并一起使用

	提供了一种方法来处理未定义或为空值和表达提供默认值。我们可以使用??运算符，为表达式提供默认值

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									console.log(undefined ?? 'codercao'); // codercao
							
						
					
				
			
		
	
	
		
			
	


	因此，如果属性不存在，则可以将无效的合并运算符与可选链接运算符结合使用以提供默认值。

	
		
			
				?
			
				
					
						
							
								1
							
								2
						
						
							
								
									let id="codetool">
		
			
	



	

	二、逻辑空分配（?? =）

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									expr1 ??= expr2
							
						
					
				
			
		
	
	
		
			
	


	逻辑空值运算符仅在空值（空值或未定义）时才将值分配给expr1，表达方式：

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x ??= y
							
						
					
				
			
		
	
	
		
			
	


	可能看起来等效于：

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x = x ?? y;
							
						
					
				
			
		
	
	
		
			
	


	但事实并非如此！有细微的差别。

	空的合并运算符（??）从左到右操作，如果x不为空，则短路。因此，如果x不为null或未定义，则永远不会对表达式y进行求值。因此，如果y是一个函数，它将根本不会被调用。因此，此逻辑赋值运算符等效于

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x ?? (x = y);
							
						
					
				
			
		
	
	
		
			
	


	

	三、逻辑或分配（|| =）

	此逻辑赋值运算符仅在左侧表达式为 falsy值时才赋值。Falsy与null有所不同，因为falsy可以是任何一种值：false，0，“”，null，undefined和NaN等

	语法

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x ||= y
							
						
					
				
			
		
	
	
		
			
	


	等同于

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x || (x = y)
							
						
					
				
			
		
	
	
		
			
	


	在我们想要保留现有值（如果不存在）的情况下，这很有用，否则我们想为其分配默认值。例如，如果搜索请求中没有数据，我们希望将元素的内部HTML设置为默认值。否则，我们要显示现有列表。这样，我们避免了不必要的更新和任何副作用，例如解析，重新渲染，失去焦点等。我们可以简单地使用此运算符来使用JavaScript更新HTML：

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									document.getElementById('search').innerHTML ||= '<i>No posts found matching this search.</i>'
							
						
					
				
			
		
	
	
		
			
	


	

	四、逻辑与分配（&& =）

	可能你已经猜到了，此逻辑赋值运算符仅在左侧为真时才赋值。因此：

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x &&= y
							
						
					
				
			
		
	
	
		
			
	


	等同于

	
		
			
				?
			
				
					
						
							
								1
						
						
							
								
									x && (x = y)
							
						
					
				
			
		
	
	
		
			
	


	

	最后

	本次分享几个优雅的JavaScript运算符使用技巧，重点分享了可选链接运算符的使用，这样可以让我们不需要再编写大量我们例子中代码即可轻松访问嵌套属性。但是IE不支持它，因此，如果需要支持该版本或更旧版本的浏览器，则可能需要添加Babel插件。对于Node.js，需要为此升级到Node 14 LTS版本，因为12.x不支持该版本。

	如果你也有优雅的优雅的JavaScript运算符使用技巧，请不要吝惜，在评论区一起交流~

	以上就是分享几个JavaScript运算符的使用技巧的详细内容，更多关于JavaScript运算符的使用的资料请关注服务器之家其它相关文章！

	原文链接：https://juejin.cn/post/6954273997731135518
标签：JavaScript 运算符 
相关文章
JavaScript 实现生命游戏2022-03-09
JavaScript 防篡改对象的用法示例2022-03-09
关于Javascript闭包与应用的详解2022-03-07
JavaScript数据类型相关知识详解2022-03-07
使用 JavaScript 制作页面效果2022-03-07
JavaScript+HTML实现学生信息管理系统2022-03-06
热门资讯
2022年最旺的微信头像大全 微信头像2022年最新版图片 2022-01-10
蜘蛛侠3英雄无归3正片免费播放 蜘蛛侠3在线观看免费高清完整 2021-08-24
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
返回顶部
首页 l 电脑版 l 网站标签 l 网站地图

分享几个JavaScript运算符的使用技巧

目录

一、可选链接运算符【？.】

二、逻辑空分配（?? =）

三、逻辑或分配（|| =）

四、逻辑与分配（&& =）

最后

相关文章

热门资讯