美文网首页
可选链操作符?. 与 空值合并运算符??

可选链操作符?. 与 空值合并运算符??

作者: 汶沐 | 来源:发表于2020-05-11 23:47 被阅读0次

    一、可选链运算符?. (IE浏览器不兼容)

    ?.运算符功能类似于 .运算符,不同之处在于如果链条上的一个引用是nullish(null或undefined),. 操作符会引起一个错误,?.操作符取而代之的是会按照短路计算的方式返回一个undefined。当?.操作符用于函数调用时,如果该函数不存在也将会返回 undefined

    1.语法
    obj?.prop
    obj?.[表达式]
    arr?.[index]
    func?.(args)
    
    // obj?.prop 举例
    let obj = {
      params:{
        id:1,
        val:2
      }
    }
    console.log(obj.params.id)  // 1
    console.log(obj.params?.id)  // 1
    // 假如 obj.params是null
    console.log(obj.params.id)  // Error: Cannot read property 'id' of null
    console.log(obj.params?.id)  // undefined
    // obj.params?.id 相当于(obj.params=== null || obj.params === undefined) ? undefined : obj.params.id
    // arr?.[index]同理,数组arr如果是null, 可选链可以自动返回undefined而不是抛出一个异常。
    
    // obj?.[表达式] 举例
    let class1= {
      student1:"小明",
      student2:"小芳",
      student3:"小强"
    }
    function dianming(num) {
      console.log(class1?.['student'+num])
    }
    dianming(1) // 小明
    
    //func?.(args)  举例
    let say = {
      apple:()=>{ return "我是苹果"},
      banana:()=>{ return "我是香蕉"},
      cherry:()=>{ return "我是车厘子"}
    }
    console.log(say.apple())   // 我是苹果
    console.log(say.banana())  // 我是香蕉
    console.log(say.cherry())  // 我是车厘子
    console.log(say.yohoo())  // Error: say.yohoo is not a function
    console.log(say.yohoo?.()) // undefined
    //函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回undefined而不是抛出一个异常。
    
    2.可选链在赋值时无效
    let object = {};
    object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment
    
    3.叠加可选链操作符
    let obj = {
      name:'obj',
      params:{
        id:1,
        value:2
      }  
    }
    console.log(obj?.params?.id) // 1
    console.log(obj?.params?.count) //undefined
    console.log(obj?.query?.id) //undefined
    
    4.短路

    可选链运算符,只要左侧遇到无效值,右侧运算就会停止,这种情况称为短路。

    const nothing = null;
    let index = 0;
    nothing?.[index++]; //  undefined
    index;              //  0
    

    二、空值合并运算符??

    ??是一个逻辑运算符,当左侧操作数是null或者undefined时,会返回右侧操作数;否则则返回左侧操作数。
    与逻辑或||操作符不同,逻辑或会在左操作数为 假值(比如,0 NaN或者‘’)时返回右侧操作数。

    1.语法
    // 左侧表达式为 null 或 undefined 时返回右侧的表达式
    leftExpr ?? rightExpr
    
    let myText = '';
    let txt1 = myText || 'Hello'
    console.log(txt1)  // Hello
    
    let txt2 = myText ?? 'Hello'
    console.log(txt2)  // ''
    
    2.短路

    当左表达式不为nullundefined时,不会对右表达式进行求值。

    let a = undefined
    let b = false
    let c = 123
    console.log( a ?? c) // 123
    console.log( b ?? c) // false
    
    3.不能与AND 或 OR 操作符共用

    直接与 AND(&&)和 OR(||)操作符组合使用 ?? 是不可取的。

    null || undefined ?? "foo"; // raises a SyntaxError
    true || undefined ?? "foo"; // raises a SyntaxError
    

    相关文章

      网友评论

          本文标题:可选链操作符?. 与 空值合并运算符??

          本文链接:https://www.haomeiwen.com/subject/gaymnhtx.html