JS の && 演算子、|| 演算子、?? 演算子、?. 演算子の詳細な比較

JavaScript には便利な演算子がたくさんあります。適切に使用すると作業効率が大幅に向上し、より多くの時間を釣りに費やすことができます。以下に 4 種類について簡単に紹介します。

&&

論理 AND 演算 ( && ) は AND ブール演算です。両方のオペランドがtrueの場合はtrueのみが返され、それ以外の場合はfalseが返されます。具体的な説明を表に示します。

条件一	条件二	結果	デモ
true1	true2	true2	1 && 2 => 2
真実	間違い	間違い	1 && 0 => 0
間違い	真実	間違い	0 && 1 => 0
false1	false2	false1	null && 0 => null

論理 AND は短絡論理の一種で、左側の式がfalseの場合、結果が直接短絡されて返され、右側の式は評価されなくなります。動作ロジックは以下の通りです。

1. 最初のオペランド (左側の式) を評価します。
2. 第 1 オペランドの値を確認してください。左側の式の値が false (null、unknown、NaN、0、""、false など) に変換できる場合、操作は終了し、最初のオペランドの値が直接返されます。
3. 最初のオペランドを true に変換できる場合は、2 番目のオペランド (右側の式) が評価されます。
4. 2 番目のオペランドの値を返します。

例：

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

||

論理 OR 演算 ( || ) はブール OR 演算です。両方のオペランドがtrueであるか、どちらか一方がtrueの場合はtrueを返し、それ以外の場合はfalseを返します。具体的には図のようになります。

条件一	条件二	結果	デモ
真実	真実	真実	1 || 2 => 1
真実	間違い	真実	1 || 0 => 1
間違い	真実	真実	0 || 2 => 2
false1	false2	false2	0 || 未定義=> 未定義

論理 OR も短絡論理の一種で、左側の式がtrueの場合、結果は直接短絡されて返され、右側の式は評価されなくなります。動作ロジックは以下の通りです。

1. 最初のオペランド (左側の式) を評価します。
2. 第 1 オペランドの値を確認してください。左側の式の値が true に変換できる場合、操作は終了し、最初のオペランドの値が直接返されます。
3. 最初のオペランドを false に変換できる場合は、2 番目のオペランド (右側の式) が評価されます。
4. 2 番目のオペランドの値を返します。

例：

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

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

??

NULL 値合体演算子 (??) は論理演算子です。左側の式がnullまたはunknownの場合は右側の式を返し、それ以外の場合は左側の式を返します。次の表の true と false は、null 未定義以外のものを表します。

条件一	条件二	結果	デモ
ヌル	1	1	ヌル ？？1 => 1
未定義	2	2	未定義 ？？2 => 2
真実	間違い	真実	真実 ？？false => true

例：

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

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

?。

オプションのチェーン演算子 ( ?. ) を使用すると、チェーン内の各参照が有効であることを明示的に検証することなく、接続されたオブジェクトのチェーンの奥深くにあるプロパティの値を読み取ることができます。(?.) 演算子の機能は (.) チェーン演算子と似ています。違いは、参照がヌル (null または未定義) の場合でもエラーを引き起こさないことです。この式の短絡戻り値は次のとおりです。未定義。関数呼び出しで使用した場合、指定された関数が存在しない場合は、unknown を返します。

次のテーブルは上記のデータを継承しています。

条件一	条件二	結果	デモ |
オブジェクト(存在)	名前	テスト	obj ?.name => テスト
obj(存在しません)	xxxx	未定義	オブジェクト ?。xxxxx =>未定義

例：

//比如这个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,
    }
  }),

結論の優先順位: ?. > && > || > ??