ES11空值合并操作符(两个问号)&& 可选链操作符( ?. ) 真的挺好用的

2022-07-21 11:25:49

在es11中,增加了我最喜欢,也在工作中经常使用的语法 空值合并操作符 和 可选链操作符,可能还有人是第一次知道,或者是看别人的代码写过,但是却不知道这语法叫什么,有什么作用?这篇文章已经帮你记录了!

空值合并操作符(??)

空值合并操作符是一个逻辑操作符,当左侧的值为null或者是undefined时,返回右侧的值,否则返回左侧的值

举例:

let name = null ?? '小明'
let age = undefined ?? 18
console.log(name)  //小明
console.log(age)  //18

这个时候你可能心里就会产生一问,这个 ?? 和 || 没什么区别啊,别急下面继续看

let num1 = 0 ?? 18
let num2 = 0 || 18
console.log(num1)  //0
console.log(num2)  //18

let str1 = '' ?? 'abc'
let str2 = '' || 'abc'
console.log(str1)  // ''
console.log(str2)  // abc

let bol1 = false ?? true
let bol2 = false || true
console.log(bol1)  //false
console.log(bol2)  //true

我们 使用 ?? 和 || 进行比较,左右侧值一样,可以看出,得到的结果完全是反着来的,那么我们就可以得出一个结论

||:在左侧为假值的时候,我们就返回右侧的值,什么是假值?例null,undefined,0,'',false,NaN

??:在左侧为null或者undefined的时候,返回右侧的值,否侧就返回左侧的值

注意:当 ?? 和 &&或者|| 连在一起用时,是不被允许的,会给你报错成 SyntaxError之类的

let data = null || undefined ?? 'xiaomi'

可选链操作符( ?. )

允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

?.操作符的功能类似于 . 链式操作符,不同之处在于,在引用为 null 或者 undefined 的情况下不会引起错误该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined

可能还是不太懂哈,我举个例子,应该每个前端人可能多多少少都写过,以vue举例

<div v-if="userInfo && userInfo.user && userInfo.user.name">{{userInfo.user.name}}</div>
userInfo:{}

这种代码我觉肯定写过,,因为我们不知道userInfo中有几层数据,导致我们取深层数据的时候,如果不这么写,会给你报什么Cannot read property undefined之类的错误,当然还有一种解决办法,就是给默认值

<div v-if="userInfo.user.name">{{userInfo.user.name}}</div>
userInfo:{user:{name:''}}

假如后台给你返回的是这些个字段,而且还有很多字段属性都没有写出来,我们不可能都去写出来然后给个默认值,显然是不合理的

let userInfo = {
    user: {
        name: '小明',
        age: 18,
        gender: '男',
        phone: '18412345678',
        getUserMessage() {
            return '123456'
        }
    }
}

这个时候就需要

let userName = userInfo && userInfo.user && userInfo.user.name  //虽然可行,但是繁琐
console.log(userName)

let age = userInfo?.user?.age  //?. 这么写就行
console.log(age)  //18

let num = userInfo?.user?.getUserMessage()
console.log(num)  //123456

let hobby1 = userInfo && userInfo.user && userInfo.user.hobby  //找一个不存在属性
console.log(hobby1)  //undefined
let hobby2 = userInfo?.user?.hobby  //找一个不存在属性
console.log(hobby2)  //undefined

let field = 'phone'
let phone = userInfo?.user?.[field]
console.log(phone) //184123456

还可以找数组

let arr = [0, 1, 2, 3, 4, 5, 6]
let item = arr?.[3]
console.log(item)  //3
let item1 = arr?.[999]
console.log(item1)  //undefined 并没有索引值999的值

还可以跟 ?? 进行结合

let city = userInfo?.user?.city ?? '洛阳'
console.log(city)  //洛阳

有木有感觉很实用呢?还没有用过的小伙伴快点用起来吧,让你的代码简洁风骚起来

  • 作者:Jay丶千珏
  • 原文链接:https://blog.csdn.net/qq_42543244/article/details/123571475
    更新时间:2022-07-21 11:25:49