知っておく価値のある JavaScript 最適化の実践的なヒント

VUE3.0 をすぐに始める方法: 学習

「難易度:?」「推奨読書時間: 5 min 」

、

• if...else 2 つ以上記述

されます。

• 、より良い最適化方法があるかどうかを考える必要があります。
• たとえば、名前に基づいてマイラオの食べ物の価格を計算する必要があります。これを行うことができます。

• この書き方だと関数本体に条件判定文が多くなり、次回商品を追加したい場合は関数内のロジックを修正してif...else文を追加する必要があります。原則として、ロジックを追加する必要がある場合、既存のコードを変更して変更を完了するのではなく、ソフトウェア エンティティを拡張することで要件の変更を解決しようとする必要があります。
• これは非常に古典的な最適化方法であり、 Mapに似たデータ構造を使用して、すべての製品を保存するオブジェクトを直接作成します。

• このようにすると、次回別の製品を追加する必要があるときにgetPriceのロジックを変更する必要がなくなります。実際には、 foodMapが使用される場所で直接使用することを好む人が増えています。このアイデア。
• このとき、学生の中にはnew Map keyに文字列だけを使用したくない場合はどうすればよいですか?」と尋ねる人もいますが、考え方は同様で、変更を保存するために追加のエンティティが拡張されています。

• により

冗長ループが置き換えられます。

• セット 1 に属する食べ物を見つけたい場合、どうやって見つけますか?
• 上記は、以前によく使用した方法です。for forの代わりにfilterとmap使用すると、コードがより合理化されるだけでなく、セマンティクスも一目でわかります。配列が最初にフィルタリングされ、次に重组过滤。

Find は冗長なループ

• や上記の例を置き換えます。この食品オブジェクトの配列の属性値に従って特定の食品を見つけたい場合は、 findを使用します。

includes は冗長なループを置き換えます

• 。上記の 2 つの詳細と同様、これらはすべて既存の関数であり、私たちが書き直す必要はありません。これらを上手に使用すると、時間を大幅に節約できます。
• 誰もが知っているように、カンフーラオタンの牛肉麺のボウルは、ザワークラウト、麺、牛肉の角切り、タバコの吸い殻、足の皮で構成されています。そこで、関数を使用して、この麺に足の皮が含まれているかどうかを確認したいと思います。もっと簡潔に書きましょうか？

• 同様に、 Kang Fu のザワークラウトと牛肉麺をこのようにプレイできるだけでなく、配列内の特定の要素を検索する同様の操作はすべて、 includes関数を使用して呼び出すことができます。

結果の戻り値

• 戻り値を含む関数を記述するとき、たとえ長い関数であっても、変数を使用せずに直接returnのはよくありません。これは、ロジックを明確にする必要があるためです。次回このコードを参照するときにもう一度説明します。
• 通常、小さな関数では、戻り値としてresultを使用できます。

早期リターン

• ただし、上記の戻り値としてresultを使用することは、すべての状況に適用されるわけではありません。場合によっては、後続の同僚が冗長なプログラムを読み取らないように、関数本体を早期に終了する必要があります。

• 次の例では、 selectedKey存在しない場合、次のコードを読み続ける必要がないように、すぐにreturn必要があります。そうしないと、より複雑な関数に直面したときに読み取りコストが大幅に増加します。

オブジェクトをそのままの状態に保つために

• 、多くの場合、リクエストを通じてバックエンドから返されたデータを取得するときに、処理する必要のある属性がほとんどない場合、データはいくつかの属性に従って処理されます。最初の方法。
• しかし、実際には、この習慣は良くありません。なぜなら、この関数が将来依存関係属性を追加する必要があるかどうかわからないときは、オブジェクトの整合性を維持する必要があるからです。 getDocDetail iconとcontent使用に限定されず、将来的にはtitleやdateなどの属性が存在する可能性があるため、完全なオブジェクトを直接渡すこともできます。これにより、パラメーター リストが短縮されるだけでなく、コードがより複雑になります。読める。

演算子の賢い使い方

• 新しい変数を作成する必要があり、その値によって参照される変数がnullか未定義かを確認する必要がある場合は、単純な記述を使用できます。

最後に

• 、まずこの記事を読んでいただいた皆様に感謝し、非常に基本的な最適化方法をまとめておきます。

[おすすめの関連ビデオチュートリアル: Web フロントエンド]

上記は、知っておく価値のあるいくつかの実践的な JavaScript 最適化のヒントの詳細です。詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。