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を返します。 }, ]、 }, }; 埋め込む:
そんな手術があるんですか? 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows システム mysql5.7.18 インストール グラフィック チュートリアル
リスト形式のテキストの展開と折りたたみの実装は参考までに。具体的な内容は以下のとおりです。必要: 1...
最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...
この記事では、centos7にyumを使用してMySQL 8.0.12をインストールする詳細な手順を...
1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...
クリックして画像を切り替えることは、日常生活で非常によく行われることです。今日の練習は、画像を切り替...
1. MySQL WorkbenchをダウンロードするWorkbench は、MySQL のグラフィ...
序文Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソ...
システムバージョン [root@ ~]# cat /etc/redhat-release CentO...
目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...
Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...
コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...
序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...
赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...
序文以前は、キャッシュを使用してルートを強調表示していました。すべてのルートをトラバースし、クリック...
英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...