js オプション連鎖演算子の使用

序文

オプションの連鎖演算子 (?.) を使用すると、チェーン内の各参照が有効であることを明示的に検証しなくても、チェーンの末尾にあるプロパティの値を読み取ることができます。違いは、参照が null または undefined の場合、エラーは発生せず、式の短絡戻り値は undefined になることです。関数呼び出しで使用する場合、指定された関数が存在しない場合は undefined が返されます。

オプションの連鎖演算子を使用すると、存在しない可能性のあるオブジェクト プロパティにアクセスしようとするときに、式のルートが短く簡潔になります。オプションの連鎖演算子は、どのプロパティが存在する必要があるか不明な場合に、オブジェクトの内容を調べるときにも役立ちます。

オプションの連鎖演算子 (?.)

文法

オブジェクト?.prop
オブジェクト?.[式]
関数?.(引数)

説明する

オプションの連鎖演算子は、接続されたオブジェクトを介して渡される参照または関数が未定義または null である可能性がある場合に、接続されたオブジェクトの値へのアクセスを簡素化する方法を提供します。
たとえば、ネストされた構造を持つオブジェクト obj を考えてみましょう。オプションの連鎖がない場合、深くネストされたサブプロパティを検索するときは、それらの間の参照を検証する必要があります。次に例を示します。

ネストされたProp = obj.first && obj.first.secondとする

エラーを回避するには、obj.first.second にアクセスする前に、obj.first の値が null でも undefined でもないことを確認してください。 obj.first を検証せずに単に obj.first.second にアクセスすると、エラーがスローされる可能性があります。
オプションの連鎖演算子 (?.) を使用すると、obj.first.second にアクセスする前に obj.first の状態を明示的に確認し、短絡評価を使用して最終結果を取得する必要がなくなります。

nestedProp = obj.first?.second とします。

. 演算子の代わりに ?. 演算子を使用すると、JavaScript は obj.first.second にアクセスする前に、obj.first が null でも undefined でもないことを暗黙的に確認します。 obj.first が null または undefined の場合、式は計算を省略し、直接 undefined を返します。

これは次の式と同等ですが、一時変数は実際には作成されません。

temp = obj.first とします。
nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second) とします。 

使用

babel コンパイラでは連鎖可能な演算子を使用できます。

バベル

yarn を @babel/plugin-proposal-optional-chaining --dev に追加します

.babelrcファイルを追加する

{
  "プラグイン": ["@babel/プラグイン提案オプションチェーン"]
}

create-react-appで使用する

デフォルトでは、create-react-app は babel 構成の変更を許可しません。ここでは、デフォルトの構成を補足できるように 2 つの追加モジュールをインストールする必要があります。

yarn をカスタマイズ-cra react-app-rewired --dev に追加します

config-overrides.js ファイルを追加する

const { useBabelRc, override } = require('customize-cra');
モジュール.exports = override(useBabelRc());

package.json を変更する

「スクリプト」: {
  "開始": "react-app-rewired 開始",
  "ビルド": "react-app-rewired ビルド",
  "テスト": "react-app-rewired テスト --env=jsdom"
}

エスリント

babel コンパイラをインストールすると、?. 演算子を使用できるようになります。ただし、eslint を使用する場合は、この新しい構文を認識するために babel-eslint をインストールする必要があります。

yarn に babel-eslint --dev を追加します

.eslintrc ファイルを追加する

{
  "パーサー": "babel-eslint",
  「ルール」: {
    "厳密": 0
  }
}

vscodeでの使用

vscode の js バリデーターは現在 ?. 演算子を認識しないため、エラー警告が表示されます。

エラー警告を解決するには:

vscode 拡張機能 ESLint をインストールし、拡張機能ストアで ESLint を検索してインストールします。

vscode 構成 (.vscode/settings.json) を変更します。

{
  "eslint.alwaysShowStatus": true、
  "eslint.autoFixOnSave": true、
  "javascript.validate.enable": false, // 主にこれ、vscode の js バリデータをオフにします "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
  "editor.formatOnSave": false,
  },
}

ソース: オプション連鎖演算子

js オプション連鎖演算子の使用に関するこの記事はこれで終わりです。より関連性の高い js オプション連鎖演算子のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。