JS中的 && 运算符 、 ||运算符 、 ??运算符、 ?. 运算符对比详解

javascript有不少好用的运算符，合理的使用可以大大提高工作效率，从而就有更多的时间去摸鱼，以下简单介绍了4种，具体如下：

&&

逻辑与运算（&&）是 AND 布尔操作。只有两个操作数都为 true 时，才返回 true，否则返回 false。具体描述如表所示:

条件一	条件二	结果	演示
true1	true2	true2	1 && 2 => 2
true	false	false	1 && 0 => 0
false	true	false	0 && 1 => 0
false1	false2	false1	null && 0 => null

逻辑与是一种短路逻辑，如果左侧表达式为 false，则直接短路返回结果，不再运算右侧表达式。运算逻辑如下：

1. 计算第一个操作数（左侧表达式）的值。
2. 检测第一个操作数的值。如果左侧表达式的值可转换为 false（如 null、undefined、NaN、0、""、false），那么就会结束运算，直接返回第一个操作数的值。
3. 如果第一个操作数可以转换为 true，则计算第二个操作数（右侧表达式）的值。
4. 返回第二个操作数的值。

实例：

let test = 20
(test > 10) && console.log('打印出来了'); // 打印出来了
语法相当于：
if(x> 10) {
	console.log('打印出来了');
}

||

逻辑或运算(||)是布尔 OR 操作。如果两个操作数都为 true，或者其中一个为 true，就返回 true，否则就返回 false。具体如图所示:

条件一	条件二	结果	演示
true	true	true	1 || 2 => 1
true	false	true	1 || 0 => 1
false	true	true	0 || 2 => 2
false1	false2	false2	0 || undefined=> undefined

逻辑或也是一种短路逻辑，如果左侧表达式为 true，则直接短路返回结果，不再运算右侧表达式。运算逻辑如下：

1. 计算第一个操作数（左侧表达式）的值。
2. 检测第一个操作数的值。如果左侧表达式的值可转换为 true，那么就会结束运算，直接返回第一个操作数的值。
3. 如果第一个操作数可以转换为 false，则计算第二个操作数（右侧表达式）的值。
4. 返回第二个操作数的值。

实例：

let username;
if (name !== null || name !== undefined || name !== '') {
   userName = name;
} else {
   userName = "";
}

//可以写为
let userName = name || "";

??

空值合并运算符（ ?? ）是一个逻辑操作符，如果左侧的表达式为 null或者 undefined 时，返回其右侧表达式，否则返回左侧表达式。
下列表格中的true、false 表示除null undefined 之外任意

条件一	条件二	结果	演示
null	1	1	null ?? 1 => 1
undefined	2	2	undefined ?? 2 => 2
true	false	true	true ?? false => true

实例：

let username;
if (name !== null || name !== undefined ) {
   userName = name;
} else {
   userName = "测试";
}

//可以写为
let userName = name ?? "测试";

?.

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

下表承接上面数据：

条件一	条件二	结果	演示｜
obj(存在)	name	测试	obj ?. name =>测试
obj(不存在)	xxxx	undefined	obj ?. xxxxx =>undefined

实例：

//比如这个item.shopList若是为null undefined这种情况 不加?.就会页面报错
shopList: item.shopList?.map((mItem) => {
    return {
      shopCode: mItem.shopCode,
      shopName: mItem.shopName,
      custCode: mItem.shopCode,
      custName: mItem.shopName,
      labels: mItem.labels,
      labelnames: mItem.labelnames,
      parentCustCode: item.custCode,
      parentCustName: item.labels,
    }
  }),

得出的结论优先级：?. > && > || > ??