ES提案可选链和管道语法

最新推荐文章于 2024-07-19 10:53:52 发布
最新推荐文章于 2024-07-19 10:53:52 发布
阅读量3.2k 收藏 1
点赞数 2
分类专栏： javascript 文章标签： js pipeline optional-chaining
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014291497/article/details/84558557
版权

原文地址：https://justforuse.github.io/blog/zh-cn/2018/11/es-optional-chaining-and-pipeline/

两种处于提案状态的新语法：可选链(?.)和管道(|>)语法
1.可选链

我们会遇到以下场景，要拿到一个层级比较深的对象的属性值，又要考虑到值的存在问题，所以我们的代码可能是这样：

if(a && a.b && a.b.c){
   
  // balabala
}

这样代码虽然严谨，但是看着不舒服。

使用可选链后：


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  justforuse
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
前端200道面试题及答案（更新中）

				
			

			

				

					m0_65450343的博客
				

				

					06-11
					
					11万+
					
				

			

		

		

			
				
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac

			
		

	



                

              
                



	

		

			

				
					
proposal-pipeline-operator, 向JavaScript添加简单但有用的管道操作符的建议.zip

				
			

			

				

					10-10
				

			

		

		

			
				
proposal-pipeline-operator, 向JavaScript添加简单但有用的管道操作符的建议 ESNext建议：管道操作员这个方案介绍了一个新的操作符 |> 类似于 F#，OCaml， tcm， Elm，Elm， hack，以及 UNIX 。 它是一种向后兼容的方式，以可读。功能化的方式简化链式函数调用，并提供了一种实用的

			
		

	



                


  
              

                


	

		

			

				
					
可选链 ?.

				
			

			

				

					叮当的猫猫的博客
				

				

					10-27
					
					2227
					
				

			

		

		

			
				
一、可选链三种语法形式
	1.obj ?.prop. --------如果obj 存在则返回 obj.prop ,否则返回 undefined。
	2.obj ?.[prop] -------如果存在则返回obj[prop] ，否则返回undefined。
	3.obj.method?.()------如果obj.method 存在则调用obj.method(),否则返回undefined。
	正如我们所看到的，这些语法形式用起来都很简单直接，检查左边部分是否为 null/undefined，如果不是则继续

			
		

	





	

		

			

				
					
vue2项目中可选链报错

					
最新发布

				
			

			

				

					weixin_45162984的博客
				

				

					07-19
					
					354
					
				

			

		

		

			
				
这是需要安装babel依赖@babel/plugin-proposal-optional-chaining,并添加到babel.config.js中。注意上面信息，错误来源是 node_modules/@open-wc模块下的文件。这个时候还需要在vue.config.js中添加如下配置,添加所有报错的模块。在babel.config.js中添加如下配置。这个时候还可能会报如下错误。这样就可以正常运行了。

			
		

	



		

			
		



	

		

			

				
					
ES11可选链操作符

				
			

			

				

					daisy
				

				

					02-18
					
					524
					
				

			

		

		

			
				
想要拿到host需要判断 config是否存在再判断config.db最后才能拿到config.db.host 非常难受
	function main(config) { 
         let dbHost = config && config.db && config.db.host
         console.log(dbHost); //127.0.0.1
      }
      main({
         db:{
            hos.

			
		

	





	

		

			

				
					
ES2020之可选链——?.

				
			

			

				

					youhebuke225的博客
				

				

					11-29
					
					557
					
				

			

		

		

			
				
前提

可选链，也就是?.与??操作符，他实质上也是一种语法糖，通俗来讲就是 对象.属性1?.属性2??默认值，如果有对象的属性1，那么就继续读取属性2，如果没有则返回默认值。就就相当于一个三元运算符

他一般适用于嵌套对象的读取，链式的安全读取，详细可以参考 MDN，可以用于

对象
数组
函数

例子
const obj = {
	a:1
}

我们如果直接读取对象中没有的属性，他就会直接报错
console.log(obj.b.c)
// Uncaught TypeError: Cannot read

			
		

	





	

		

			

				
					
ES2020 系列：可选链 “?.“

				
			

			

				

					wgf1997的博客
				

				

					07-23
					
					612
					
				

			

		

		

			
				
可选链 "?."

可选链?.是一种访问嵌套对象属性的防错误方法。即使中间的属性不存在，也不会出现错误。

问题

如果你才刚开始读此教程并学习 JavaScript，那可能还没接触到这个问题，但它却相当常见。

例如，我们有些用户会有地址信息，但有一少部分用户并没有提供相关信息。那么我们就不能安全地读取到user.address.street：


letuser={};//这个user恰巧没有address

alert(user.address.street);//Error...

			
		

	





	

		

			

				
					
"建筑方面的协调模块化：体系结构级别的新颖交互和组合结构

				
			

			

				

					
				

			

		

		

			
				
b5理论计算机科学电子笔记154（2006）25-41www.elsevier.com/locate/entcs协调作为一个建筑方面卡洛斯·E。成本A、1、3、4M. 皮拉尔·罗梅，巴勃罗·德拉富恩特3ManuBarrio-Sol'orzan或7，2，3AD ep to。...

			
		

	





	

		

			

				
					
ECMAScript 6规范总结（长文慎入）

					
热门推荐

				
			

			

				

					梦回forever的博客
				

				

					02-24
					
					1万+
					
				

			

		

		

			
				
闲话

学习ES6的动机起于对其promise标准的好奇，它与jQuery源码中Deferred不同，而且在异步编程中加入了Generator，在后续ES7中更有Async。这勾起我强烈的兴趣了解ES6更多的内容，于是完整的学习了阮一峰老师的《ECMAScript 6入门》。

本文不是专门的es6笔记，因此不对规范细节做详细说明。希望通过这篇博客，记录自己所理解的es6的语言风格和编程思想。

			
		

	





	

		

			

				
					
初次接触vue，我是怎么学习的

				
			

			

				

					curry_zhao的博客
				

				

					11-05
					
					522
					
				

			

		

		

			
				
又到了review的时候，话不多说，这次放出，最初的学习笔记。
Vue
我将Vue看成了一门新得编程语言来学，基础的语法知识我认为就以下这些重点。
一、数据绑定语法
1、数据绑定最基础的形式是文本插值，使用 {{}} 语法（双大括号）,三个大括号标签可以输出真的HTML字符串。双大括号标签也可以用在 HTML 特性 (Attributes) 内，。
也可以实现单次插值绑定，{{ * msg }}。...

			
		

	





	

		

			

				
					
proposal-pipeline-operator：向JavaScript添加简单但有用的管道运算符的提议

				
			

			

				

					02-28
				

			

		

		

			
				
ESNext提案：管道运营商
该提议引入了一个新的运算符|>类似于 ，  ，  ，  ，  ， 和 ，以及UNIX管道和的& 。 这是一种向后兼容的方式，以一种可读的，功能化的方式简化链式函数调用，并为扩展内置原型提供了一种实用的替代方法。
 :warning: 警告：管道语法的详细信息目前尚未确定。 有正在考虑中。 本自述文件是一个最低限度的建议，其中涵盖了管道操作员的基本功能。 它用作比较竞争方案折衷方案的稻草人。
 这些建议如下：
 F＃管道：+
智能管道：+
两者的已经在进行中，以收集反馈。
 有关更多信息，另请参阅的以及。
介绍
管道运算符本质上是带有单个参数的函数调用上的有用语法糖。 换句话说， sqrt(64)等效于64 |> sqrt 。
 将多个功能链接在一起时，这可以提高可读性。 例如，给定以下功能：
 function doubleSay ( str ) {
  return str

			
		

	





	

		

			

				
					
delivery-pipeline-plugin, 管道可视化的Jenkins插件，完美的连续交付.zip

				
			

			

				

					10-10
				

			

		

		

			
				
delivery-pipeline-plugin, 管道可视化的Jenkins插件，完美的连续交付 传递管道插件 交付管道插件的目的是为in提供交付/生成管道的可以视化。 插件是完美的连续输送管道可视化的信息散热器。在持续传递中，传递过程的快速反馈和可视化是最重要的方面之一。 当使用wilhelmina作为构建服务器时，

			
		

	





	

		

			

				
					
babel-plugin-syntax-pipeline：允许解析管道运算符|>

				
			

			

				

					01-31
				

			

		

		

			
				
babel-plugin-语法管道
 允许解析管道运算符|>
 提案： 
安装
npm install --save-dev babel-plugin-syntax-pipeline
# or
yarn add --dev babel-plugin-syntax-pipeline
用法
通过.babelrc （推荐）
 .babelrc 
{
  " plugins " : [ " syntax-pipeline " ]
}
通过CLI 
babel --plugins syntax-pipeline script.js
通过节点API
 require ( "babel-core" ) . transform ( "code" , {
  plugins : [ "syntax-pipeline" ]
} ) ;
建立
npm run build
测试
npm run test
贡献
分叉（  ）
 创建功能分支（ git checkout -b feature/<feature> ）
 提交更改（ git commit -am 'Added some feature' ）

			
		

	





	

		

			

				
					
babel-plugin-transform-pipeline：将管道运算符编译为ES5

				
			

			

				

					01-31
				

			

		

		

			
				
babel-plugin-transform-pipeline
 将管道运算符（ |> ）编译为ES5
 提案： 
例
基本的
在
var user = { name : 'SuperPaintman' } ;
function capitalize ( str ) {
  return str . toUpperCase ( ) ;
}
function sayHello ( name ) {
  return 'Hello, ' + name + '!' ;
}
var res = user . name
  | > capitalize
  | > sayHello ;
// => "Hello, SUPERPAINTMAN!"
 出
var user = { name : 'SuperPaintman' } ;
function capitalize ( str ) {
  return str . toUpperCase ( ) ;
}
function sayHello ( name ) {
  return 'Hello, ' + name + '!' ;
}
var r

			
		

	





	

		

			

				
					
ES2020新语法：可选链操作符

				
			

			

				

					m0_72383454的博客
				

				

					05-27
					
					1140
					
				

			

		

		

			
				
可选链操作符

			
		

	





	

		

			

				
					
写了一个 vscode 插件：自动添加可选链

				
			

			

				

					HelloWorldLJY的博客
				

				

					08-24
					
					235
					
				

			

		

		

			
				
通过eslint、babel为代码添加可选链，将可选链格式化功能加入到vscode插件中

			
		

	





	

		

			

				
					
ES的语法糖-babel的可选链和双问号语法

				
			

			

				

					NurTuam—何永杰
				

				

					08-02
					
					3210
					
				

			

		

		

			
				
ES的语法糖-babel的可选链和双问号语法
前言
ES全称为ECMAScript，是JavasSript的一种语言标准。ECMAScript发布新语法规范需向TC39委员会提案，任何人都可以向其会提案。TC39由包括许多浏览器厂商在内的各方组成，提案需要经历五个阶段，每个阶段的变动都需要由TC39委员会批准(传送门：TC39)，如下： Stage 0: strawman——最初想法的提交。 Stage 1: proposal（提案）——由TC39至少一名成员倡导的正式提案文件，该文件包括API事例。 St

			
		

	





	

		

			

				
					
egg项目eslint不识别链式操作符的解决方法

				
			

			

				

					无聊猿的博客
				

				

					12-25
					
					1399
					
				

			

		

		

			
				
项目用到链式?.结果eslint一直提示
const permissionHandleArr = positionPermissionHandle.map(item => item.permission_handle?.name);

解决方案
升级eslint-config-egg至8.1.2

说明
eslint升级到v8版本以上也能解决问题，但是会报错，我用的是2020版的webstorm：
this.CliEngine is not a constructor

根据网上提供的修改eslint

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值