ES6---4个强大运算符（??、??=、?.、?:）

1. 空值合并操作符（?? ）

• 空值合并操作符（ ?? ）是一个逻辑操作符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。 空值合并操作符（ ?? ）与逻辑或操作符（ || ）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。

注意：只有当操作数为 null、undefined 这两个假值的时候才会使用预测的数据，但是 JS 中假值包含：未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔false，空字符串''，一定要注意。

// 简单例子
null ?? 5 // => 5
3 ?? 5 // => 3

复制

const nullValue = null;
const emptyText = ""; // 空字符串，是一个假值，Boolean("") === false
const someNumber = 42;
 
const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;
 
console.log(valA); // "valA 的默认值"
console.log(valB); // ""（空字符串虽然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

复制

2. 空赋值运算符（??= ）

• ??= 也被称为空赋值运算符，与上面的非空运算符相关。看看它们之间的联系：

var x = null
var y = 5
console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5
​
let a = 0;
a ??= 1;
console.log(a); // 0
 
let b = null;
b ??= 1;
console.log(b); // 1
​
function gameSettingsWithNullish(options) {
  // 还可以多级别调用之后给定其为null的默认值
  options.gameSpeed ??= 1
  options.gameDiff ??= 'easy' 
  return options
}

复制

仅当值为 null 或 undefined 时，此赋值运算符才会赋值。上面的例子强调了这个运算符本质上是空赋值的语法糖

3. 可选链操作符（?. ）

• 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。( ?. ) 操作符的功能类似于( . )链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
• 当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
 
const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined
 
console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

复制

a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

复制

举个栗子：

let travelPlans = {
  destination: 'DC',
  monday: {
    location: 'National Mall',
    budget: 200,
    host: null
  }
}
let res = travelPlans?.tuesday?.location ?? "locahost"; // => locahost
let res2 = travelPlans?.host; // => undefined

复制

这个location是哪里来的呢？这个tuesday又是哪里来的呢？就算不是外面的travelPlans这个对象里也没有location和tuesday啊！！！

let res = travelPlans?.tuesday?.location; 
<=等价=> 
let res = travelPlans&& travelPlans.tuesday&& travelPlans.tuesday.location

复制

注意： 作用就是判断这个对象（travelPlans）下的（tuesday）下的（location）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，双问号后面接的就是默认值。

4. 三元运算符（ ?: ）

• ?: ：又叫条件运算符，接受三个运算数：条件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式。实际效果：

function checkCharge(charge) {
    return (charge > 0) ? '可用' : '需充值' 
}
console.log(checkCharge(20)) // => 可用
console.log(checkCharge(0)) // => 需充值

复制