当前位置: 首页 > Web前端 > CSS

合并JS可选(-.)运算符符号,原来的函数也可以写成可选的方式,又学习了!

时间:2023-03-30 19:19:07 CSS

作者:AshishLahoti译者:前端小智来源:CSS-Tricket有梦想,有干货,微信搜索【大招天下】关注这位大清早还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。可选的链接?运算符用于通过隐式空检查访问嵌套对象属性。概述如何使用null(null和undefined)检查访问对象的嵌套属性?假设我们必须从后端的接口访问用户详细信息。可以使用嵌套的三元运算符:constuserName=response?(response.data?(response.data.user?response.data.user.name:null):null):null;或使用if进行空检查:letuserName=null;if(response&&response.data&&response.data.user){userName=response.data.user.name;}或更好地使它成为单行链接&&条件像这个:constuserName=response&&response.data&&response.data.user&&response.data.user.name;上述代码的共同点是链接有时会非常冗长并且变得难以格式化和阅读。这就是为什么?.运营商被提议。让我们改变?。重构上面的代码:constuserName=response?.data?.user?.name;很不错。句法?。ES2020引入了语法,用法如下:obj.val?.pro//如果`val`存在,返回`obj.val.prop`,否则返回`undefined`。obj.func?.(args)//如果obj.func存在,则返回`obj.func?.(args)`,否则返回`undefined`。obj.arr?.[index]//如果obj.arr存在,返回`obj.arr?.[index]`,否则返回`undefined`。使用?。operator假设我们有一个用户对象:constuser={name:"FrontendXiaozhi",age:21,homeaddress:{country:"China"},hobbies:[{name:"KnockCode"},{name:"Dishwashing"}],getFirstName:function(){returnthis.name;}}对现有属性的属性访问:console.log(user.homeaddress.country);//中国访问不存在的属性:console.log(user.officeaddress.country);//抛出错误“UncaughtTypeError:Cannotreadproperty'country'ofundefined”使用?。访问不存在的属性:console.log(user.officeaddress?.country);/未定义方法访问已有方法:console.log(user.getFirstName());//前端小智访问不存在的方法:console.log(user.getLastName());//抛出错误“UncaughtTypeError:user.getLastNameisnotafunction”;改用?。不存在的访问方法:console.log(user.getLastName?.());//“未定义”数组访问现有数组:console.log(user.hobbies[0].name);//“敲代码”访问不存在的方法:console.log(user.hobbies[3].name);//抛出错误“UncaughtTypeError:Cannotreadproperty'name'ofundefined”changeUse?.访问不存在的数组:console.log(user.dislikes?.[0]?.name);//“不明确的”??我们知道的运营商?如果对象不存在,就返回undefined,open发送可能不会返回undefined而是返回一个默认值。这时候,我们可以用双问??运算符有点抽象,直接举个例子:constcountry=user.officeaddress?.country;console.log(country);//undefined需要返回默认值:constcountry=user.officeaddress?.country??“中国”;console.log(country);//中国~说完,我是智能清洁工,SPA出发,下期见!代码部署无法实时获知未来可能出现的BUG。之后为了解决这些BUG,花了很多时间在日志调试上。顺便推荐一个好用的BUG监控工具,Fundebug。原文:https://codingncoepts.com/jav...