JS の効率的なマジック演算子の概要

JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算子もいくつか追加されています。今日は、いくつかの効率的な魔法オペレーターを取り上げます。

1. オプション連鎖演算子

以前は、より深い構造を持つプロパティを使用する必要があり、すべての親が存在するかどうか確信が持てなかった場合、データ構造などの一連の判断を行う必要がありました。

定数学生 = {
  スコア： {
    数学: 98,
  },
};

最も内側の数学属性の値を取得したい場合:

if (学生 && 学生.スコア) {
  コンソールにログ出力します。
}

1.1 ディーププロパティを取得する

ただし、オプション チェーン演算子を使用すると、判断ははるかに簡単になります。オプション チェーン演算子は、チェーン内で null または undefined に遭遇すると、エラー例外をスローせずに直接 undefined を返します。

console.log(生徒?.スコア?.数学);

1.2 オプションメソッドの実行

可能な機能を実行するときにも使用できます。たとえば、React コンポーネントでは、渡されるメソッドはオプションです。

// getScore はオプションのパラメータで、未定義または関数です。const Student = ({ getScore }: { getScore?: () => void }) => {
  使用効果(() => {
    // getScore が存在する場合は、通常どおり getScore() メソッドを実行します getScore?.();
  }, []);

  <div></div> を返します。
};

または、DOM 要素のメソッドを実行するときにも使用できます。

document.querySelector は 2 つのタイプを返します。DOM 要素が実際に存在する場合はその要素を返し、存在しない場合は null を返します。 TypeScript を書いたことがある人なら誰でも、メソッドを呼び出すときは常に DOM 要素が存在することを確認する必要があることを知っています。

const dom = document.querySelector('.score');
if (dom) {
  dom.getBoundingClientRect(); //このメソッドは、dom 要素が存在する場合にのみ実行されます}

オプションの連鎖演算子を使用する場合は、それを直接呼び出すだけです。

document.querySelector('.score')?.getBoundingClientRect();

1.3 配列の値を取得する

配列が存在する場合は、特定のインデックスの値を取得します。配列が存在するかどうかを判断する必要がなくなり、直接使用できます。

arr?.[1]; // arrが存在する場合は、通常通りarr[1]の値を取得します

上記の 3 つの状況は組み合わせて使用​​することもできます。構造がより複雑な場合は、さまざまなタイプがあります。ここでは、配列計算の添え字 2 メソッドを実行する必要があります。

定数学生 = {
  スコア： {
    数学： [
      98,
      67,
      () => {
        99を返します。
      },
    ]、
  },
};

埋め込む：

学生?.スコア?.数学?.[2]?.(); // 99

そんな手術があるんですか？

1.4 割り当て操作を実行できません

オプションの連鎖演算子は、取得操作のみを実行でき、割り当て操作は実行できません。

たとえば、可能な配列または DOM 要素に値を割り当てると、構文例外が直接スローされます。

arr?.[1] = 2; // x
document.querySelector('.score')?.innerHTML = 98; // x

上記のステートメントを実行すると、次のプロンプトが表示されます。

キャッチされない構文エラー: 代入の左側が無効です

つまり、左側のオプション チェーンには値を割り当てることができません。

2. 二重疑問符演算子

私の理解では、二重疑問符演算子 ?? は、OR 演算子 || を解決するために設計されています。

まず、 or 演算子の動作を確認しましょう。左側のデータが偽値 (数値 0、ブール型 false、空文字列、未定義、null) の場合、右側のステートメントが実行されます。

偽 || 123;
0 || 123;
'' || '123';
未定義 || 123;
ヌル || 123;

ただし、場合によっては、false と 0 はどちらも通常の値ですが、or 演算子を使用するとエラーが発生します。

たとえば、次の例では、スコアが空の場合、デフォルト値は 1 になります。通常の値 0 を入力すると、0 が返されるはずです (ただし、実際には 1 が返されます)。

const getSCore = (スコア: 数値) => {
  スコアを返す || 1;
};

スコアを取得する(0); // 1

このとき、二重疑問符演算子?? を使用します。二重疑問符演算子は、左側が未定義または null の場合にのみ、右側のステートメントを実行します。

const getSCore = (スコア: 数値) => {
  スコアを返す?? 1;
};

スコア取得(0); // 0

同時に、二重疑問符演算子を = と組み合わせて代入演算にすることもできます。左側が null または undefined の場合、右側のステートメントの結果が左側の変数に割り当てられます。

スコア ??= 1; // 1

私はたくさん本を読みます、あなたに嘘はつきません

3. ORとANDの代入演算

以前、 or 演算子を使用して代入演算を実行したときは、次のように記述しました。

スコア = スコア || 1;
年齢 = 年齢 && 24;

次のように短縮できます。

score ||= 1; // score = score || 1 と同等
age &&= 24; // age = age && 24 と同等

4. 二重アスタリスク演算子

二重アスタリスク演算子 ** は比較的早い段階で js に導入されましたが、ほとんど使用されません。実際には、これは Math.pow() と同等の累乗演算を実行します。

2 ** 10; // 1024、2 の 10 乗、Math.pow(2, 10); と同等

5. 結論

上記のサンプルはすべて Chrome 90 で正常に実行されました。

変換を支援する Babel がすでにある場合は、コード内でこれらの演算子を適切に適用できるため、コードを大幅に簡素化できます。

これで、JS の効率的な演算子の概要に関するこの記事は終了です。より関連性の高い JS の効率的な演算子については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。