第一步 安装
npm install --save-dev @babel/plugin-proposal-optional-chaining 然后在.babelrc.js文件夹里进行配置
plugins:"@babel/plugin-proposal-optional-chaining",
vscode好像不太支持这种语法,所以得在vscode的setting中配置
"javascript.validate.enable": false,

接下来就可以使用了

大概用法

     可以省略逻辑运算符
const obj={
a:{
b:1
},
       b:[1,2,4]
}
const num=obj && obj.a && obj.a.b
const num=obj?.a?.b
    const arr=obj?.b?.[0] //判断数组的第0项是否存在
在react项目中接受组件穿过来的方法时可以这么写
const {getValue}=this.props
getValue && getValue()
getValue?.()
数组在进行遍历前可以进行判断,避免数组为undefined报错
const arr=[1,2,3]
arr?.map(item=>{
//...
})

可选链plugin-proposal-optional-chaining的使用(优化)的更多相关文章

  1. 【Swift学习】Swift编程之旅---可选链(二十一)

    可选链Optional Chaining是一种可以在当前值可能为nil的可选值上请求和调用属性.方法及下标的方法.如果可选值有值,那么调用就会成功:如果可选值是nil,那么调用将返回nil.多个调用可 ...

  2. swift学习笔记之-可选链式调用

    //可选链式调用 import UIKit /*可选链式调用(Optional Chaining) 1.在可选值上请求和调用该可选值的属性.方法及下标的方法,如果可选值有值,那么调用就会成功,返回可选 ...

  3. Swift中可选型的Optional Chaining 和 Nil-Coalesce(Swift2.1)

    /* 下面是介绍Optional Chaining 和 Nil-Coalesce */ // Optional Chaining (可选链) if let errorMessage = errorMe ...

  4. swift 注意事项 (十六) —— 可选链

    可选链(Optional Chaining) 我们都知道"可选型"是什么.那么可选链又是什么,举个样例解释一下: struct MyName{      var name } st ...

  5. Swift的可选链,类型转换和扩展

    可选链(Optional Chaining) 可选链是一种请求或调用属性.方法,子脚本的过程. 可选性体现于请求或调用的目标当前可能为nil.若不为nil则成功调用.否则返回nil并将链失效. 调用可 ...

  6. Swift 可选链

    可选链(Optional Chaining)是一种可以请求和调用属性.方法和子脚本的过程,用于请求或调用的目标可能为nil. 可选链返回两个值: 如果目标有值,调用就会成功,返回该值 如果目标为nil ...

  7. js optional chaining operator

    js optional chaining operator js 可选链 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效. ?. 操作符的功能类似于 ...

  8. Swift中的可选链与内存管理(干货系列)

    干货之前:补充一下可选链(optional chain) class A { var p: B? } class B { var p: C? } class C { func cm() -> S ...

  9. 学习Swift -- 可选链

    可空链式调用 可空链式调用是一种可以请求和调用属性.方法及下标的过程,它的可空性体现于请求或调用的目标当前可能为空(nil).如果可空的目标有值,那么调用就会成功:如果选择的目标为空(nil),那么这 ...

  10. Swift_可选链

    Swift_可选链 点击查看源码 //可选链 func test() { class Person { //可选属性可能为nil或Residence类 var residence: Residence ...

随机推荐

  1. [LeetCode题解]234. 回文链表 | 快慢指针 + 反转链表

    解题思路 找到后半部分链表,再反转.然后与前半部分链表比较 代码 /** * Definition for singly-linked list. * public class ListNode { ...

  2. 来吧,展示!SpringBoot OSS 整合全过程,没见过比这更详细的了

    前言 阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.其数据设计持久性不低于 99.9999999999%(12 ...

  3. .Net orm 开源项目 FreeSql 2.0.0(满意的答卷)

    写在开头 2018年11月头脑发热到今天,一晃已经两年,当初从舒服区走向一个巨大的坑,回头一看后背一凉. 两年时间从无到有,经历数不清的日夜奋斗(有人问花了多长时间投入,答案:全职x2 + 两年无休息 ...

  4. 用MindManager做完思维导图后怎么加密

    使用MindManager我们可以制作出很多简洁明了的思维导图,然而,不论是分享还是查看这些导图,我们往往需要对导图进行加密操作,尤其是制定公司或企业的下一步发展计划时,加密导图就显得很有必要了. M ...

  5. CorelDRAW常用工具之橡皮擦工具

    很多作图以及设计软件都会自带橡皮擦工具,但对于专业做平面设计的小伙伴来说,普通的橡皮工具肯定是无法满足日常作图需求的,今天来看看CorelDRAW的橡皮擦能玩出什么花样来. 1.擦除对象 CorelD ...

  6. css3系列之text-shadow 浮雕效果,镂空效果,荧光效果,遮罩效果

    text-shadow 其实这东西,跟  box-shadow 差不多,没啥好说的不懂的话,点这里→  css3系列之详解box-shadow  . 它只有 四个参数 x(第一个值设置x位置) y(第 ...

  7. jQuery 小demo 热点排名

    效果如下: 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha ...

  8. 不使用 MQ 如何实现 pub/sub 场景?

    hello,大家好,我是小黑,又和大家见面啦~~ 在配置中心中,有一个经典的 pub/sub 场景:某个配置项发生变更之后,需要实时的同步到各个服务端节点,同时推送给客户端集群. 在之前实现的简易版配 ...

  9. scentos7安装redis,以及redis的主从配置

    redis的安装 下载redis安装包 wget http://download.redis.io/releases/redis-4.0.6.tar.gz 解压压缩包 tar -zxvf redis- ...

  10. Codeforces Round 665 (div2)

    2020.8.22 装修完了我的博客,喜欢这个造型,挂上友链就更好了 昨天cf就是一个彻头彻尾的悲剧,本来能上蓝,结果因为在A题耽误时间过多导致掉了30分,不过没关系,这算是一个小波动吧,影响不了什么 ...