可选链操作符(?. )和空值合并操作符(??)

·  阅读 601

前言

可选链和控制合并运算符是 ES2020 规范新增的语法,给属性的访问和函数的调用带来的方便。

前置概念

  1. nullish:值为 null 或者 undefined
  2. falsy:值为 nullundefined0''false
  3. truly:非 falsy 的值。
  4. &&:逻辑与操作符,形如leftExpr && rightExprleftExprtruly 时,执行rightExpr并作为返回值。leftExprfalsy 时,短路操作,并把 leftExpr的值作为返回值。
  5. ||:逻辑或操作符,形如leftExpr || rightExprleftExprtruly 时,短路操作,并把 leftExpr的值作为返回值。leftExprfalsy 时,执行 rightExpr并作为返回值。

可选链操作符(Optional Chaining Operator)

语法

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
复制代码

描述

在普通的属性访问符.[]的前面加上? or ?. ,组成?. or ?.[],访问数组时使用 arr?.[0],调用函数时使用 fn?.()

objnullish 时,表达式短路并返回 undefined

实例

let obj= {}
复制代码

我们要访问 obj 对象的 subname属性,name 属性不存在,抛出错误!

console.log(obj.sub.name) //  TypeError: Cannot read properties of undefined
复制代码

因此我们需要这样写,防止报错:

console.log(obj.sub && obj.sub.name) // undefined
复制代码

如今,借助可选链操作符,我们以简洁的语法达到同样的效果:

console.log(obj.sub?.name) // undefined
复制代码

与函数调用一起使用时,如函数不存在,也返回 undefined

console.log(obj.sub?.say?.()) // undefined
复制代码

访问数组成员

let arr = ['a','b']
console.log(arr?.[1]) // 'b'
console.log(arr?.[2]) // undefined
复制代码

空值合并运算符(Nullish Coalescing Operator)

语法

leftExpr ?? rightExpr
复制代码

描述

leftExprnullish 时,返回rightExpr,否则返回leftExpr

与逻辑或运算符 || 不同,逻辑或操作符会在左侧操作数为 falsy 时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,''0)时。见下面的例子。

实例

console.log('' ?? 'default string') // ""
console.log('' || 'default string') // "default string"
console.log(0 ?? 42) // 0
console.log(0 || 42) // 42
复制代码

总结

可以看到空位合并运算符 ?? 和可选链运算符 ?.一样,都是针对的 nullundefined 这两个 nullish空值。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改