【js】es6 可选链 ? . 和 空值合并 ? ? 运算符使对象多层判断更简洁

最新推荐文章于 2023-05-15 18:23:11 发布
最新推荐文章于 2023-05-15 18:23:11 发布
阅读量898 收藏 1
点赞数 2
分类专栏： javascript 文章标签： es6 可选链 ?. 前端 空值合并
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ann295258232/article/details/121487970
版权

es6可选链?.

1.在调用函数里使用

如果我们多层的调用，直接调用当中间某层不存在时代码就会报错，如直接不判断调用ref.componentRef.instance.ngOnDestroy()，当中间某一层如instance不存在时就会报错

发现判断某个对象的函数存在才调用，通过使用es6的可选链非常方便，分享如下：

ref?.componentRef?.instance?.ngOnDestroy?.();

相当于

if (ref && ref.componentRef && ref.componentRef.instance && ref.componentRef.instance.ngOnDestroy) {
  ref.componentRef.instance.ngOnDestroy();
}

2.在做判断

if(obj?.person?.age){

}

相当于

if(obj && obj.person && obj.person.age){

}

空值合并??

空值合并也很方便，在我们默认赋值的时候很简洁的使用，当不为undefined或null,就使用??右侧的值

var age = b ?? 9;

当b为undefined或null时，age就为9，而b如果为0或者其他转换为false的值a的值还是为9的

参考：
MDN | 可选链操作符
MDN | 空值合并运算符
阮一峰 | ECMAScript 6 入门 | 运算符的扩展

向着光芒的女孩
关注
专栏目录
vue.js 中使用（…）运算符报错的解决方法
12-10
扩展运算符在ES6中是一个非常实用的特性，它允许我们方便地合并对象或者数组。然而，不是所有的浏览器都支持ES6，尤其是在旧版本的浏览器中，这就会导致在运行时出现错误。本篇文章将详细讲解如何解决Vue.js项目中...
es6：空值合并运算符
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
10-14 2516
为空判断时写法 if(value !== null && value !== undefined && value !== ''){ //... } 用空值合并运算符改进 if(value??'' !== ''){ //... } 空值合并操作符（??） MDN：空值合并运算符
ES6解决对象取值时多层if判断问题
sun_qqq的博客
05-15 337
ES6引入了可选链操作符（Optional Chaining Operator），可以简化多层if判断的问题。可选链操作符是一个问号（?）后跟一个点（.）或两个点（..），用于访问可能不存在的属性或方法，避免出现TypeError错误。如果person或address不存在，city将会是undefined，而不会抛出TypeError错误。如果array不存在或index超出了数组范围，item将会是undefined。
ES6 判断是否为空对象
真爱一生的博客
05-27 6435
使用ES6的Object.keys()方法 是ES6的新方法, 返回值也是对象中属性名组成的数组 var data = {}; var arr = Object.keys(data); alert(arr.length == 0);//true 即为空对象 var datas={a:1,b:2}; var aRR = Object.keys(datas); console.log(aRR) --> [‘a’,‘b’] ...
es6空值合并运算符
weixin_42067569的博客
01-19 647
语法： leftExpr ?? rightExpr 与逻辑操作符( || )相比 左边为 null 或者 undefined 时，返回右边，否则返回左边。 运用场景 判断非空时 if(value !== null && value !== undefined && value !== ''){ //... } 简写 if((value??'') !== ''){ //... } ...
ES2020系列之空值合并运算符 ??
11-20
空值合并运算符 ?? 提供了一种简短的语法，用来获取列表中第一个“已定义”的变量（译注：即值不是 null 或 undefined 的变量）。 a ?? b 的结果是： a，如果 a 不是 null 或 undefined， b，其他情况。 所以，x ...
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
es6-promise.auto.min.js
05-17
es6-promise.auto.min.js
IE11 兼容 ES6，可适配VUE.js
09-21
在引入其他脚本前先引入browser.min.js。 script标签的type的值设为text/babel。 <script type="text/javascript" src="./babel/browser.min.js"> 在页面引入browser-polyfill脚本： <script type="text/...
2021-11-18 空值合并运算符【ES6】
一只白猫罢了
11-18 273
利用空值合并运算符??，判断非空。 当??左侧操作数为null 或 undefined，返回其右侧的操作数。 与||的不同在于，逻辑或 操作符会在左侧操作数为假值时返回右侧操作数（例如，’’ 或 0）。 if ( (value ?? '') !== '') { // 说明非空 } ...
JS中的可选链操作符（?.）、空值合并运算符（??）
m0_60312580的博客
04-13 1221
注意：可选链操作符只能在运行时检查对象是否为 null 或 undefined ，并在对象为 null 或 undefined 时返回 undefined，而不会报错。它与或运算符（||）有所不同，或运算符在变量值为 false 时也会返回默认值，而?js中的可选链接操作符?. 是ECMAScript2020 引入的一种语法，用于简化对可能为 null 或 undefined 的对象属性或方法的访问。只有在变量的值为 null 或 undefined 时才返回默认值，对于其他为 false 的值，?
可选链运算符（?.）以及空值合并运算符（??）的使用
qq_43710066的博客
03-10 243
可选链运算符（?.）以及空值合并运算符（??）以及逻辑或 || 的使用
可选链操作符跟空值合并运算符
zheng_jia_jun的博客
08-15 211
是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。在开发过程中我们需要判断一个对象里面有没有一个属性，并且需要使用这个属性里面对象的值，就需要写类似以下的判断代码。es6 中新增了可选链操作符。...
JavaScript 如何简化代码里的多级判定?
白瑕 的博客
10-26 893
`JavaScript`用二元运算符和`if`拆分优化多级判定结构, 用`JavaScript`逻辑运算符替换`if-else`结构判定. js代码优化.
多层&&时可以使用es6链判断运算符
weixin_45613604的博客
10-20 563
let message = { body: { user: { firstName: 1, }, }, } let aaa = (message && message.body && message.body.user && message.body.user.firstName) ||"没有" // es6链判断运算符 let bbb = message?.body?.user?.firstName ||...
es6遍历树结构并判断_实现树形结构数据 es6
weixin_39529443的博客
12-30 785
'data':{"List": [{"authorityId": 1,"authorityName": "数据分析","grade": "1001","fatherId": "0"},{"authorityId": 2,"authorityName": "商务政策","grade": "1002","fatherId": "0"},{"authorityId": 3,"authorityName"...
ES6 运算符
海盗船长的博客
08-05 2340
和 || 和 && 运算符 的优先级没有被定义，现在的规则是，如果多个逻辑运算符一起使用，必须用括号指定优先级，否则会报错。)是一个逻辑运算符，与 || 运算符类似，当?运算符左侧返回 null 或 undefined 时，则返回?与 || 运算符不同的是， || 运算符左侧返回 假 值时，返回右侧内容。与 || 和 && 运算符相似，左侧表达式不为 null 或 undefined 时，不对右侧表达式进行运算。大多数运算符是左结合，指数运算度是又结合，多个指数运算符连用时是从左右边开始计算的。...
js中的 可选链操作符、空值合并操作符、空值赋值运算符、非空断言操作符
qq_44376306的博客
02-22 2799
1.可选链操作符( ?.) const adventurer = { name: 'Alice', cat: { name: 'Dinah' } }; const dogName = adventurer.dog?.name; console.log(dogName); // expected output: undefined console.log(adventurer.someNonExistentMethod?.()); // expected output: undef.
vue-cli 构建的vue2老项目 如何支持js2020新语法可选链运算符?.
最新发布
09-07
要在 Vue CLI 构建的 Vue 2 老项目中添加对 ES2020 新语法可选链运算符（?.）的支持，你需要更新你的项目配置和安装相应的插件。以下是步骤： 1. **检查当前支持情况**： 首先，确认你的项目是否已经使用了 Babel 或者 TypeScript 进行 ES6 以上的语言特性转码。如果没有，你将需要它们。 2. **安装依赖**： 如果你使用的是 JavaScript，可以考虑安装 `@babel/plugin-proposal-nullish-coalescing-operator` 和 `@babel/plugin-proposal-optional-chaining` 插件来引入可选链运算符。如果你已经通过 Webpack 或者 Vue CLI 的 babel 配置管理插件，可以在 `.babelrc` (`.babelrc.js` 或 `.babel.config.js`) 中添加如下内容： ```json { "plugins": [ "@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining" ] } ``` 如果你使用 TypeScript，那么 TypeScript 自带了这些新特性的支持，无需额外安装。 3. **更新配置**： 如果你在使用 .vue 文件，确保 Vue CLI 的 TypeScript 或者 Babel 模板已启用。如果你使用的是 Vue CLI 3 及以上版本，可以运行 `npm run upgrade` 来更新你的模板到最新版，这通常会包含新的 Babel 配置。 4. **重启服务**： 完成上述步骤后，重启你的开发服务器 (`npm run serve` 或者 `yarn serve`）以应用新的设置。 5. **开始使用可选链**： 现在你可以直接在代码中使用 `.?.` 运算符了，例如 `user?.name`。如果 `user` 为 `null` 或 `undefined`，表达式不会抛出错误，而是返回 `undefined`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值