zoukankan      html  css  js  c++  java
  • ES2020链判断运算符?.和Null判断运算符??

    链判断运算符 ?. 

    业务场景:

     1 // 假设data是个数组,如果data没有值,为undefinded,则直接复制会报错,因为没有length这个属性
     2 
     3 const dateCount = data.length // 报错
     4 
     5 // 正常的处理情况是,加个判断
     6 if (data) {
     7     const dateCount = data.length
     8 }
     9 
    10 
    11 // 使用链判断符,就可一步到位
    12 const dataCount = data?.length  // data不存在时,直接返回undefined

    上面代码使用了?.运算符,直接在链式调用的时候判断,左侧的对象是否为nullundefined。如果是的,就不再往下运算,而是返回undefined

    这样好像没有链的感觉,再举个例子

    1 const name = (data && data.person && data.person.name) || 'no name'
    2 // 这样的判断机制非常麻烦
    3 
    4 // 使用链判断符
    5 const name = data?.Person?.Name || 'no name'
    6 // 非常精简

    注意点:

    一、短路

    a?.[++x]
    // 等同于
    a == null ? undefined : a[++x]
    
    // 假如为Ture,右侧永不执行

    由于短路的机制,使用delete运算符时,如果为true,则无法执行。

    二、括号影响

    const name = (data?.person).name
    // 不管data是否为空,.name一定会执行,所以不推荐使用链运算符的时候使用括号

    三、右侧不能是十进制数值

    这是为了兼容三元与运算符。a ? .3 : 0,如果按照?.作为链运算符的话,就会冲突到

    四、禁止场合

    1、禁止在构造函数(new)的时候使用

    2、?.右侧有模板字符串``

    3、?.左侧是super

    4、?.用于赋值运算的左侧。(右侧可)

    null 判断运算符??

    业务场景:

    设置变量默认值的时候,正常使用||进行赋值。

    const name = data.name || 'tom'

    原意是data,name为空,则使用tom这个默认值,但是如果data.name为false或者0, 默认值也会生效

     1 const name = data.name ?? 'tom' 

    使用??来处理,则data.name必须是null或者undefined时,才会使用默认值

    以梦为马
  • 相关阅读:
    git常用命令
    国内优秀npm镜像,nvm
    canvas --> getImageData()
    canvas sprite动画 简单封装
    springboot项目中ttf和woff字体图标页面无法显示
    树莓派配置Oracle JDK8
    记一次SqlServer大表查询语句优化和执行计划分析
    linux 查看某个进程和服务内存占用情况命令
    安装MySQL后,需要调整的10个性能配置项
    ARM架构上的Debian10编译timescaledb
  • 原文地址:https://www.cnblogs.com/lsAxy/p/12845462.html
Copyright © 2011-2022 走看看