ES6---几个优雅的运算符使用技巧(?. ??= ||= &&=)

目录

1. 使用可选链式调用

2. 逻辑空分配（?? =）

3. 逻辑或分配（|| =）

4. 逻辑与分配（&& =）

---

1. 使用可选链式调用

// 原始js判断非空操作
// 判断糅杂，不易书写
if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
}

let object = {name:'Lily',age:20}
// 对于静态的属性调用
object?.name    // Lily
object?.address // undefined
 
// 对于动态的属性调用 (variable 是动态变量)
object?.[variable]    // 不存在：undefined
 
 
// 动态属性：另一个例子
let data;
console.log(data?.children?.[0]?.title) // undefined
 
data  = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao
 
// 方法调用
object.runsOnlyIfMethodExists?.()
object.getTeacherList?.()
 
----------------------------------------------------
 
// 使用??运算符 搭配使用
console.log(undefined ?? 'codercao'); // codercao
let arr = object?.list ?? []          // []

2. 逻辑空分配（?? =）

空的合并运算符（??）从左到右操作，如果 x 不为 nullish 值则中表达式不执行。
因此，如果 x 不为null 或者 undefined，则永远不会对表达式y进行求值。
如果y是一个函数，它将根本不会被调用。因此，此逻辑赋值运算符等效于
 
x ?? (x = y);

3. 逻辑或分配（|| =）

 

x ||= y 等价于  x || x = y
 
// 举例如下：
document.getElementById('search').innerHTML ||= 'No posts found matching this search.'
等价于：
document.getElementById('search').innerHTML || 
document.getElementById('search').innerHTML = 'No posts found matching this search.'

4. 逻辑与分配（&& =）

 

x &&= y  等价于 x && (x = y)