掌握特殊操作符：??与?.

前言

在一些项目开发的过程中，有一些需求可能需要很长的一段代码才能实现，而掌握一些特殊的操作符，灵活运用，从而减少代码的冗余度是很有必要的。比如本次要介绍的这两个操作符。

一、空值合并操作符：??

扩展

空值合并操作符??有个与其功能类似的操作符，即||(逻辑或运算符)，也是一般空值合并时比较常用的。他们有什么不同呢？

不同之处：

• ??：当有两个值需要空值合并时，只有当左侧为null和undefined，才会返回右边的数。
• ||：当有两个值需要空值合并时，当左边的值为假（0或false或""或null或undefined）时返回右边的值，有时候在默认赋值时会有意料之外的错误。

实例

    let a1 = "" || false || 1;
    let a2 = null || undefined || 2;
    let a3 = "" ?? false ?? 1;
    let a4 = null ?? undefined ?? 2;
    console.log("逻辑操作符,空值合并", a1, a2, a3, a4); //逻辑操作符,空值合并 1 2 "" 2

一、可选链操作符：?.

扩展

可选链操作符?.，其功能与.链式操作符类似。

不同之处：

• ?.：在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。
• .：在引用为空 (nullish ) (null 或者 undefined) 的情况下会引起错误。

实例

let animal = { cat: { name: "lisa" } };
console.log("可选链操作符", animal.dog?.name, animal.cat?.sex); //可选链操作符 undefined undefined
console.log("可选链操作符", animal.dog.name, animal.cat.sex); //程序中断，报错

OK，记录完毕。