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ダイナミックリンクライブラリの使用

推薦する

テキストの展開と折りたたみの効果を実現するJavaScript

リスト形式のテキストの展開と折りたたみの実装は参考までに。具体的な内容は以下のとおりです。必要: 1...

Linuxコマンドに基づいてフォルダー内の特定のファイルパスを抽出します

最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...

CentOS7 は yum を使用して mysql 8.0.12 をインストールします

この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...

Blazor における CSS 分離の問題

1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...

画像をクリックして切り替えるJavaScript

クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...

MySQL Workbenchのダウンロードと使用方法のチュートリアルの詳細な説明

1. MySQL WorkbenchをダウンロードするWorkbench は、MySQL のグラフィ...

Docker コンテナにデータベースをデプロイする場合の欠点は何ですか?

序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...

Linux システムのデュアル ネットワーク カード バインディング構成の実装

システムバージョン [root@ ~]# cat /etc/redhat-release CentO...

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

Dockerコンテナの状態変換の実装

Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

Vueモバイル端末に最適な適応ソリューションについての簡単な説明

序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

Vueコンポーネントのルーティング強調表示問題の解決策

序文以前は、キャッシュを使用してルートを強調表示していました。すべてのルートをトラバースし、クリック...

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...