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) の場合にのみ、expr1 に値を割り当てます。

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: