第一步 安装
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. laravel5.5 如何创建Facades并使用

    laravel Facades概念略,自行百度. 如何创建Facades使用步骤1. 创建一个php文件,App\Utils\SmsSend.php.<?php namespace App\Ut ...

  2. SQL Server 不同数据间建立链接服务器进行连接查询

        在平时查询以及导数据时,经常会遇到需要使用两个数据库里数据的情况,这时就会用到在两个服务器之间建立一个链接,进行操作,脚本语句如下: 举例:例如你在测试服务器上想要查询业务库里的数据信息,此脚 ...

  3. 【剑指offer】面试题68(补充) 0到n-1中缺失的数字(二分法的进一步应用)

    题目 一个长度为n-1的递增排序数组中的所有数字都是唯一的,并且每个数字都在范围0到n-1之内. 在范围0到n-1的n个数字中有且只有一个数字不在该数组中,请找出这个数字. 输出 输入:[0,1,2, ...

  4. python学习-pickle模块(序列化)

    简介 1 python-pickle模块 该pickle模块实现了用于序列化和反序列化Python对象结构的二进制协议. "Pickling"是将Python对象层次结构转换为字节 ...

  5. MyBatis学习01

    1.初识MyBatis 环境说明: jdk 8 + MySQL 5.7.19 maven-3.6.1 IDEA 学习前需要掌握: JDBC MySQL Java 基础 Maven Junit 什么是M ...

  6. 利用MathType在Word里输入几何符号的技巧

    通过学习几何学的知识,我们发现其中包含的几何符号有很多,比如有表示图形的符号,如三角形,平行四边形,圆,角,圆弧等:还有表示位置关系的符号,如平行,垂直等:还有表示矢量等其他符号,那这些符号怎么打出来 ...

  7. NOIP2015 解题报告

    Day1 T3 运输计划 二分之后做一遍树上差分,找出被所有时间超限的运输计划覆盖的花费时间最长的航道,将其改造成虫洞. LCA 用倍增求可能会被卡常,建议用 Tarjan 求.

  8. J - Sushi 题解(期望dp)

    题目链接 题目大意 给你n个盘子,每个盘子可能有1,2,3个披萨 你选到每个盘子的概率是一样的. 你如果选到空的盘子什么都不做 如果你选到有披萨的盘子则吃掉一个披萨 求吃完所有披萨的期望 题目思路 设 ...

  9. c++11-17 模板核心知识(九)—— 理解decltype与decltype(auto)

    decltype介绍 为什么需要decltype decltype(auto) 注意(entity) 与模板参数推导和auto推导一样,decltype的结果大多数情况下是正常的,但是也有少部分情况是 ...

  10. 定时器:Django-crontab

    定时器是平时编程中比较常用的,今天分享一个Django里非常好用又简单的定时亲:Django-crontab.这个真的是非常的简单好用,比celery+Django执行周期任务简单的多 首先下载dja ...