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 インストール グラフィック チュートリアル
原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...
序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...
始める前にクラウドサーバーを持っています。私のはTencent Cloud Server (Cent...
場所表現タイプ~ は大文字と小文字を区別して通常の一致を実行することを示します~*は大文字と小文字を...
1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...
目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...
目次1. 要件の説明2. アイデアの概要1. 延長を要求する2. アイデアの概要3. SQLコード1...
よくある質問から議論を始めましょう。CSS を使用して要素の高さを [ブラウザ コンテンツ ウィンド...
1.アルパインイメージをダウンロードする [root@DockerBrian ~]# docker ...
序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...
目次1. 電卓機能の紹介2. 計算機ページのデザイン1. ナビゲーションバー2. データ部分3. i...
通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...
序文まずは最終的な効果を見てみましょう。私が自分で作った小さなデモです。まずEChartsの公式サイ...
この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...
データシート:列から行へ: max(case when then) を使用max---集計関数は最大...