zoukankan      html  css  js  c++  java
  • js ?? 判空运算符作用和常见场景

    JavaScript中??符号, Null 判断运算符

    作用:读取对象属性的时候,如果某个属性的值是null或undefined,有时候需要为它们指定默认值。以前做法是通过双管道符号 || 运算符指定默认值。

    // 通过||运算符指定默认值,属性的值如果为''或false或0,默认值也会生效。
    const userAddress = data.userInfo.address || '地球'
    

    通过||运算符指定默认值,属性的值如果为''或false或0,默认值也会生效。

    为了避免这种情况,ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。

    // 默认值只有在左侧属性值为null或undefined时,才会生效。
    const userAddress = data.userInfo.address ?? '地球'
    

    此运算符的一个目的,就是跟链判断运算符?.配合使用,为null或undefined的值设置默认值。

    const userAddress = data.userInfo?.address ?? '地球'
    

    上面代码中,如果data.userInfo是null或undefined,或者data.userInfo?.address是null或undefined,就会返回默认值'地球'。这一行代码包括了两级属性的判断。

    使用场景1:判断函数参数是否赋值

    function Component(props) {
      const enable = props?.enable ?? true
    }
    
    // 上面代码等同于
    
    function Component(props) {
      const { enable: enable = true } = props
    }
    
    

    使用场景2:

    const userAddress = data.userInfo?.address ?? '地球'
    

    使用注意点

    ??有一个运算优先级问题,它与&&和||的优先级孰高孰低。现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。
    栗子:

    ;(lhs && middle) ?? rhs
    
    lhs && (middle ?? rhs)
    ;(lhs ?? middle) && rhs
    
    lhs ?? (middle && rhs)
    ;(lhs || middle) ?? rhs
    
  • 相关阅读:
    Hibernate逆向工程
    使用Hibernate连接Oracle 无法识别生成的SQL问题
    法线的变换矩阵
    搭建Struts2开发环境
    留存: struts2+jquery+json集成
    一些WebGL的资源
    9个WebGL的演示
    WPF动画制作简单的按钮动画
    C# /windowForm/WPF/SilverLight里面操作Word帮助类提供给大家
    高斯投影正反算的代码
  • 原文地址:https://www.cnblogs.com/liaoing/p/14228991.html
Copyright © 2011-2022 走看看