空值合并运算符（??）

空值合并运算符（ ?? ）是一个逻辑运算符，当左侧的操作数为 [null] 或者 [undefined]（JS 中假值包含：未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔 false，空[字符串]）时，返回其右侧操作数，否则返回左侧操作数。

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

语法：

leftExpr ?? rightExpr

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

不能与 AND 或 OR 运算符共用

逻辑空赋值 (??=)

逻辑空赋值运算符 (x ??= y) 仅在 x 是 [nullish] (null 或 undefined) 时对其赋值。

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration);
// expected output: 50

a.speed ??= 25;
console.log(a.speed);
// expected output: 25

语法

expr1 ??= expr2

function config(options) {
  options.duration ??= 100;
  options.speed ??= 25;
  return options;
}

config({ duration: 125 }); // { duration: 125, speed: 25 }
config({}); // { duration: 100, speed: 25 }

可选链运算符（?.）（不能用于赋值）

可选链运算符（ ?. ）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 ([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

语法

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

例：

// 使用可选链进行函数调用
function doSomething(onContent, onError) {
  try {
   // ... do something with the data
  }
  catch (err) {
    onError?.(err.message); // 如果 onError 是 undefined 也不会有异常
  }
}

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // details 的 address 属性未有定义
  }
};
let customerCity = customer.details?.address?.city;

// … 可选链也可以和函数调用一起使用
let duration = vacations.trip?.getTime?.();

三元运算符（?:）

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

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