ES6---4 个非常好用的运算符（??、??=、?.、?:）

👨‍🎓作者：Java 学术趴

🏦仓库：Github、Gitee

✏️博客：CSDN、掘金、InfoQ、云+社区

💌公众号：Java 学术趴

🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。

🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号 Java 学术趴联系小编。

☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！

👋大家好！我是你们的老朋友 Java 学术趴。给大家分享一下今天小编用到的几个非常好用的 javaScript 运算符。

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

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

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

// 简单例子null ?? 5 // => 53 ?? 5 // => 3
const nullValue = null;const emptyText = ""; // 空字符串，是一个假值，Boolean("") === falseconst 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 = nullvar y = 5console.log(x ??= y) // => 5console.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 ??= 1options.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.ba?.[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"; // => locahostlet 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)) // => 需充值