JavaScriptの強力な演算子をいくつか見てみましょう

序文

他の人のコードを読んでいるときに、自分の思考の流れがすぐに止まってしまうような奇妙な書き方に遭遇したことはありませんか? 我に返ったとき、ある英雄が以前にここにいたことに突然気づきます。

今日は、JavaScript の強力な演算子をいくつか見てみましょう~~~

1. ヌル合体演算子

初めて出会ったときに疑問符が 2 つ見えたなら、おそらく心の中にもっと疑問符があるはずです (子供たち、疑問符はたくさんありますか~~~)

2 つの疑問符は、null 合体演算子と呼ばれます。最初の引数が null/undefined でない場合は最初の引数を返し、そうでない場合は 2 番目の引数を返します。

console.log(1 ?? "www.shanzhzonglei.com"); // 1
console.log(false ?? "www.shanzhzonglei.com"); // false
console.log(null ?? "www.shanzhzonglei.com"); // www.shanzhzonglei.com
console.log(未定義?? "www.shanzhzonglei.com"); // // www.shanzhzonglei.com

したがって、最初のパラメータが null/undefined の場合にのみ、2 番目のパラメータが返されます。

JS では、undefined、null オブジェクト、値 0、NaN、ブール値 false、および空の文字列 '' はすべて false 値ですが、?? 非 null 演算子は null/undefined のみを処理することに注意してください。

これは、左側のオペランドが false の場合に右側のオペランドを返す論理 OR 演算子 (||) とは異なります。たとえば、偽値（'' または 0）の場合。

コンソール.log(1 || 2); // 1
コンソール.log("" || 2); // 2

2. ??= 空代入演算子

ああ、疑問符が 2 つ以上になって、イコール記号もできました。質問は難しくなってきていますか?

??= 空の代入演算子。この代入演算子は、値が null または未定義の場合にのみ値を割り当てます。

学生 = { 年齢: 20 };
学生の年齢??= 18;
console.log(生徒の年齢); // 20

学生名 ??= "shanguagua";
console.log(student.name); // 'shanguagua'

これは上記の ?? null 合体演算子に関連しています。x ??= y は x ?? (x = y) と同等であり、x = y は x が null または未定義の場合にのみ実行されます。

x = null とします。
x ?? = 20;
コンソール.log(x); // 20

y = 5とします。
y ?? = 10;
コンソールログ(y); // 5

3. ?. オプション連鎖演算子

オプションの連鎖演算子 ?. を使用すると、チェーン内の各参照が有効であることを明示的に検証することなく、接続されたオブジェクトのチェーンの奥深くにあるプロパティの値を読み取ることができます。演算子はオブジェクトのプロパティが null または undefined かどうかを暗黙的にチェックし、コードをよりエレガントかつ簡潔にします。

定数オブジェクト = {
  名前: "山呱呱",
  フード: {
    バー： {
      バズ: 18,
      楽しい: () => {},
    },
  },
  学校：
    学生:
      {
        名前:「シャングアグア」、
      },
    ]、
  },
  言う（） {
    「www.shanzhonglei.com」を返します。
  },
};

console.log(obj?.foo?.bar?.baz); // 18
console.log(obj?.school?.students?.[0]["name"]); // シャングアグア
console.log(obj?.say?.()); // www.shanzhonglei.com

4. ?: 三項演算子

三項演算子とも呼ばれます。まあ、これは非常によく使われます。

条件式b?x:yについては、まず条件bを計算してから判定します。 b の値が true の場合は、x の値を計算し、その結果が x の値になります。それ以外の場合は、y の値を計算し、その結果が y の値になります。

コンソール.log(false ? 1 : 2); // 2
コンソール.log(true ? 1 : 2); // 1

5. 論理 AND (&&) と論理 OR (||)

まず確認しましょう:

論理 AND (&&): 最初のオペランドが true の場合、2 番目のオペランドは評価されません。2 番目のオペランドが何であっても、最終的な計算結果は true になる必要があるためです。

実際の開発では、この機能を使用することで以下の操作を実現できます。

1. 値がtrueの場合、関数を実行する

関数 say() {
  console.log("www.shanzhonglei.com");
}
type = true とします。
タイプ && say(); // www.shanzhonglei.com

2. 価値を決定する

// age が 10 より大きく 20 より小さい場合のみ実行されます if (age > 10 && age < 20) {
  コンソールにログ出力します。
}

論理和 (||): 最初のオペランドが false (つまり、js の false 値) の場合、2 番目のオペランドは評価されません。これは、この時点では 2 番目のオペランドが何であっても、最終的な計算結果は false になる必要があるためです。

実際の開発では、この機能を使用することで以下の操作を実現できます。

1. 変数の初期値を設定する

学生 = {
  名前:「シャングアグア」、
};

console.log(student.age || "www.shanzhonglei.com"); // www.shanzhonglei.com

2. 価値を決定する

// 年齢が 10 または 20 または 30 の場合、if (age === 10 || age === 20 || age === 30) { を実行します。
  コンソールにログ出力します。
}

6. ビット演算子 & と |

ビット演算子は、& (and) や | (or) などのビットを操作します。ビット演算子を使用すると、小数点は切り捨てられます。数値を四捨五入するには |0 を使用します。 &1 を使用して奇数または偶数を判別することもできます。

実際の開発では、この機能を使用することで以下の操作を実現できます。

1. 丸め

1.3 |
  (0 - // 1 を出力
    1.9) |
  0; // -1 を出力

2. 奇数と偶数を判断する

num = 5 とします。
!!(num & 1); // 真
!!(数値 % 2); // 真

7. ダブルビット演算子~~

正の数の場合は Math.floor() の代わりに、負の数の場合は Math.ceil() の代わりにビット演算子を使用できます。

二重否定ビット演算子の利点は、同じ演算をより高速に実行できることです。正の数の場合、~~ は Math.floor() と同じ結果を返し、負の数の場合、Math.ceil() と同じ結果を返します。

Math.floor(5.2) === 5; // 真
~~3.2 === 3; // 真
Math.ceil(-6.6) === -6; // 真
~~-4.5 === -6; // 真

7. 論理演算子!

! は変数をブール型に変換でき、null、未定義、空の文字列 '' はすべて true に否定され、残りは false になります。一般的に言えば、!、!!、!=、!== など、いくつかの用法があります。

7.1 ! を使って否定する

cat = false とします。
console.log(!cat); // 真

7.2 !! を使って型判定を行う

このメソッドは、変数 a が null、undefined、または '' と等しくない場合にのみ実行できます。

var a;
if (a != null && typeof a != undefined && a != "") {
  //コンテンツがある場合にのみ実行されるコード}

は以下と同等です:

もし(!!a){
  //コンテンツがある場合にのみ実行されるコード...
}

7.3 2つの値は等しいか?

一般的に言えば、すべては !== と等しくありません。なぜなら、すべては !== と等しくないを使用すると、0 != "" は false を返すからです。その理由は、JS では、0 と '' は両方ともブール型に変換されると false になるからです。したがって、すべては !== と等しくないを使用することをお勧めします。

a = 0 とします。
b = 0 とします。
c = "0"とします。
d = '' とします。
a != b //偽
a != c // false 数値と文字列の 0 は等しいとみなされますa != d // false 0 と空の文字列は等しいとみなされますa !== b // false
a !== c // 真
a !== d // 真