JavaScript演算子の使用に関するヒントをいくつか共有します

JavaScript演算子の使用に関するヒントをいくつか共有します

ECMAScript の開発プロセスでは、破壊、アロー関数、モジュールなど、多くの機能更新が行われます。これらは、JavaScript の記述方法を大きく変えるでしょう。気に入る人もいれば、そうでない人もいるでしょうが、すべての新機能と同様に、最終的には慣れるでしょう。 ECMAScript の新しいバージョンでは、null 演算子、AND 演算子、OR 演算子という 3 つの新しい論理代入演算子が導入されています。これらの演算子の登場により、コードがよりクリーンで簡潔になります。ここでは、JavaScript 演算子のエレガントな使用方法のヒントをいくつか紹介します。

1. オプションの連鎖演算子 [? .】

Optional Chaining Operator は ES2020 提案のステージ 4 にあるため、仕様に追加する必要があります。これにより、オブジェクトの内部プロパティ、特に深くネストされたプロパティにアクセスする方法が変更されます。これは TypeScript 3.7 以降の機能としても利用できます。

フロントエンドを開発するほとんどの人は、null や undefined プロパティに遭遇すると思います。 JS 言語の動的な性質により、これらに遭遇しないということは不可能です。特にネストされたオブジェクトを扱う場合、次のコードが非常に一般的です。

if (データ && data.children && data.children[0] && data.children[0].title) {
    // タイトルがあります!
}


上記のコードは、名前が存在することを確認するために JSON を解析する必要がある API 応答用です。ただし、オブジェクトにオプションのプロパティがある場合や、一部の構成オブジェクトに特定の値の動的マッピングがある場合、多くの境界条件を確認する必要があるこのような状況に遭遇する可能性があります。

この時点で、オプションの連鎖演算子を使用すると、すべてがさらに簡単になります。ラダーを明示的に検索しなくても、ネストされたプロパティをチェックします。必要なのは、null 値をチェックするプロパティの後に「?」演算子を使用するだけです。この演算子は式の中で必要な回数だけ使用でき、いずれかの項が未定義の場合は早期に返されます。

静的プロパティの使用方法は次のとおりです。

オブジェクト?.プロパティ

動的プロパティの場合は次のように変更します。

オブジェクト?.[式] 

上記のコードは次のように簡略化できます。

title = data?.children?.[0]?.title;とします。

次に、次の場合を考えます。

データを入力します。
console.log(data?.children?.[0]?.title) // 未定義

データ = {children: [{title:'codercao'}]}
console.log(data?.children?.[0]?.title) // codercao

こう書くと簡単じゃないですか? 演算子は null 値に達するとすぐに終了するため、条件付きでメソッドを呼び出したり、条件付きロジックを適用したりするためにも使用できます。

定数条件付きプロパティ = null;
インデックスを 0 にします。

console.log(conditionalProperty?.[index++]); // 未定義
console.log(インデックス); // 0

メソッド呼び出しは次のように記述できます。

object.runsOnlyIfMethodExists?.()

たとえば、以下の親オブジェクトで parent.getTitle() を直接呼び出すと、「Uncaught TypeError: parent.getTitle is not a function」というエラー メッセージが表示され、parent.getTitle?.() は実行されずに終了します。

親を {
    名前: "親",
    友達: ["p1", "p2", "p3"],
    getName: 関数() {
      console.log(この名前)
    }
  };
  
  parent.getName?.() // 親
  parent.getTitle?.() //実行されません

無効なマージで使用する

未定義を処理したり、null 値や式にデフォルト値を提供したりする方法を提供します。 ??演算子を使用して式のデフォルト値を指定できます。

console.log(未定義?? 'codercao'); // codercao

したがって、void 合体演算子をオプションの連鎖演算子と組み合わせて使用​​することで、プロパティが存在しない場合にデフォルト値を提供できます。

title = data?.children?.[0]?.title ?? 'codercao' とします。
console.log(タイトル); // codercao

2. 論理的な空の代入 (?? =)

式1 ??= 式2

論理ヌル演算子は、次のように、expr1 が null (null または undefined) の場合にのみ、exp​​r1 に値を割り当てます。

x ?? = y

次のように同等になります:

x = x ?? y;

しかし、そうではありません!微妙な違いがあります。

ヌル合体演算子 (??) は左から右に動作し、x がヌルでない場合は短絡します。したがって、x が null または undefined でない場合、式 y は評価されません。したがって、y が関数である場合、それはまったく呼び出されません。したがって、この論理代入演算子は、

x ?? (x = y);

3. 論理和代入(|| =)

この論理代入演算子は、左側の式が偽値の場合にのみ値を割り当てます。 falsy は、false、0、""、null、undefined、NaN などの任意の値になることができるため、null とは異なります。

文法

x ||= y

同等

x || (x = y)

これは、既存の値が存在しない場合にそれを保持し、存在する場合はデフォルト値を割り当てたい場合に便利です。たとえば、検索リクエストにデータがない場合、要素の内部 HTML をデフォルト値に設定します。それ以外の場合は、既存のリストを表示します。こうすることで、不必要な更新や、解析、再レンダリング、フォーカスの喪失などの副作用を回避できます。この演算子を使用するだけで、JavaScript を使用して HTML を更新できます。

document.getElementById('search').innerHTML ||= '<i>この検索に一致する投稿は見つかりませんでした。</i>'

4. 論理積代入 (&& =)

ご想像のとおり、この論理代入演算子は、左側が true の場合にのみ値を割り当てます。したがって:

x &&= y

同等

x && (x = y)

やっと

今回は、オプションの連鎖演算子の使用に焦点を当てて、JavaScript 演算子の優れた使用方法のヒントをいくつか紹介します。これにより、例では多くのコードを記述しなくても、ネストされたプロパティに簡単にアクセスできます。ただし、IE はこれをサポートしていないため、IE または古いブラウザをサポートする必要がある場合は、Babel プラグインを追加する必要があるかもしれません。 Node.js の場合、12.x ではサポートされていないため、Node 14 LTS バージョンにアップグレードする必要があります。

JavaScript 演算子の優れた使用方法のヒントがあれば、ぜひコメント セクションで共有してください。

上記は、JavaScript 演算子の使用に関するヒントをいくつか共有した詳細な内容です。JavaScript 演算子の使用に関する詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • ネイティブ js での演算子とプロセス制御の例の詳細な説明
  • js の一般的でない演算子と演算子の概要
  • JS のあらゆる場所で絶対等価演算子の使用をやめる
  • JavaScript プログラムにおけるフロー制御文の使用法の概要
  • JavaScript フロー制御ステートメントの詳細な説明
  • Javascript の基礎: 演算子とフロー制御の詳細な説明

<<:  Linux での chmod コマンドの使用方法の詳細な説明

>>:  MySQLデータベース設計:Pythonを使ったスキーマ操作方法の詳しい解説

推薦する

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...

Docker での Redis 接続の急増をトラブルシューティングした実践的な記録

土曜日、本番サーバー上の Redis サーバーが利用できなくなり、エラー メッセージは次のようになり...

ウェブページ作成時のHTMLタグの使用に注意してください

この記事では、Web ページの作成を学習するときに注意すべき HTML タグに関するいくつかの問題を...

HTML タイトル属性をラップする方法

数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

Vue3 で状態管理を実装するために provide を使用する方法

目次序文provide/inject を通じて Vuex 関数を実装する方法このプラグインをアプリケ...

MYSQL トランザクション チュートリアル Yii2.0 マーチャント引き出し機能

序文私はプログラマーとしてスタートした PHP プログラマーです。これまで、トレーニング コースで勉...

Windows環境でのMySQL 8.0.13無料インストールバージョンの設定チュートリアル

目次圧縮ファイルをダウンロードするアドレス: https://dev.mysql.com/downl...

jsは多次元配列を1次元配列に変換し、それを並べ替えます

目次まず多次元配列の平坦化についてお話しましょう方法 1: flat()方法 2: 空の文字列を連結...

WeChatアプレットのスクロールビューが左右連動効果を実現

WeChatアプレットはスクロールビューを使用して左右のリンクを実現します。参考までに、具体的な内容...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

JavaScript における URL オブジェクトの素晴らしい使い方

目次序文解析パラメータURLパラメータを変更する要約する序文URLオブジェクトはページ側ではあまり使...

HTMLは入力完了を検出する機能を実装する

入力が進行中かどうかを検出するには、「onInput(event)」を使用しますコンテンツが変更され...