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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • これまでにないほど詳細に解説されたJavaScript演算子
  • 一般的でない js 演算演算子の概要
  • JavaScript の基本演算子
  • js の一般的でない演算子と演算子の概要
  • JS のあらゆる場所で絶対等価演算子の使用をやめる
  • いつものJS演算子の説明を見てみましょう

<<:  Windows システム mysql5.7.18 インストール グラフィック チュートリアル

>>:  Linuxダイナミックリンクライブラリの使用

推薦する

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

MySQL ビューの原理と使用法の詳細な分析

序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...

nginx ロケーション優先度の詳細な説明

場所表現タイプ~ は大文字と小文字を区別して通常の一致を実行することを示します~*は大文字と小文字を...

Dockerコンテナのネットワーク管理とネットワーク分離の実装

1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...

MySQL データベースの集計クエリと結合クエリ操作

目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...

時系列転位修復ケースを実装するSQL

目次1. 要件の説明2. アイデアの概要1. 延長を要求する2. アイデアの概要3. SQLコード1...

要素の高さを下から上へ、上から下へ制御する CSS メソッド

よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザ コンテンツ ウィンド...

alpineをベースにdockerfileで作成したクローラーScrapyイメージの実装

1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...

MySQLクエリ最適化分析チュートリアルをステップバイステップで教えます

序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...

JavaScriptで計算機機能を実現するプロセスの詳細な説明

目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...

ウェブサイトはグレー表示されています。画像を含む互換コードはすべてのブラウザをサポートしています

通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...

WeChatミニプログラムの基本チュートリアル:Echartの使用

序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...

jQuery は呼吸カルーセルを実装します

この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...

MySQL の列から行への変換、フィールドの結合方法 (必読)

データシート:列から行へ: max(case when then) を使用max---集計関数は最大...