第一步 安装
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. 一篇文章了解_docker

    (一)Docker介绍 2018年10月6日 星期六 15:04 什么就Docker? Docker是一个开源项目, 诞生于2013年初,最初是dotCloud公司内部的一个业余项目.它基于Googl ...

  2. Python_异常处理、调试

    1.try except 机制 # 错误处理 # 一般程序都要用到错误捕获,当没有加且有错误的时候Python解释器会执行错误捕获,且是一层层向上捕获[所以问题点会在最下面] try: print(' ...

  3. SpringSecurity之认证

    SpringSecurity之认证 目录 SpringSecurity之认证 1. 盐值加密 1. 原理概述 2. 使用说明 1. 加密 2. 认证 1. 页面成功跳转的坑 2. 使用验证码校验的坑 ...

  4. Hive 报错Class path contains multiple SLF4J bindings.

    进入hive报错信息如下 SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/ ...

  5. python笔记(1)---数据类型

    数据类型 基本的五大数据类型 对python中的变量有如下的五种基本的数据类型: Number数字 list列表 Tuple元组 string字符串 Dictionary字典 1.Number [注意 ...

  6. FL Studio采样设置之时间拉伸栏

    今天小编将带领大家了解一下FL Studio采样设置页面中的时间拉伸栏知识,该栏目包含了和采样音频的时间拉伸相关的设置.其右边是一个时间伸缩方式下拉列表,里面列出了很多种类的伸缩方式,自动方式是默认的 ...

  7. Java进阶专题(十七) 系统缓存架构设计 (上)

    前言 ​ 我们将先从Redis.Nginx+Lua等技术点出发,了解缓存应用的场景.通过使用缓存相关技术,解决高并发的业务场景案例,来深入理解一套成熟的企业级缓存架构如何设计的.本文Redis部分总结 ...

  8. C Looooops POJ - 2115

    数论好题.. 香! 首先我们看到这一题, 题意是 \[a + c * x \equiv b (mod \ \ 2 ^ k) \] 对此式移一下项, 得 \[c * x \equiv b - a (mo ...

  9. 关于Jersey框架下的Aop日志 和Spring 框架下的Aop日志

    摘要 最近新接手的项目经常要查问题,但是,前面一拨人,日志打的非常乱,好多就根本没有打日志,所以弄一个AOP统一打印一下 请求数据和响应数据 框架 spring+springmvc+jersey 正文 ...

  10. Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree 题解(贪心+易错)

    题目链接 题目大意 给你一课树,要你给每一条边分权值,每条边的权值大于0,他们的乘积等于k,而且要使得n-1条边1的数量尽可能少,定义 f(u,v)为u到v的边权和求 \(\max \sum_{i=1 ...