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

私たちの仕事では、細部を工夫することでコードの可読性を高め、コードをよりエレガントに見せることができます。この記事では、一目で理解できる実践的な JavaScript 最適化のヒントをいくつか紹介します。

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

正片

if...else のヌードル コードを減らす

2 つ以上の
• if .. を記述したら.else 関数を使用する場合は、より良い最適化方法があるかどうかを検討する必要があります。 [関連する推奨事項: JavaScript 学習チュートリアル]
たとえば、名前に基づいてマイラオの食べ物の価格を計算する必要がある場合は、次のようにします。

この書き方だと関数本体に条件判定文が多くなり、次に商品を追加したいときに、関数を変更する必要があります 内部ロジックに
• if...else ステートメントを追加すると、開閉原則 にもある程度違反します。ロジックを追加する必要がある場合は、変更を達成するために既存のコードを変更するのではなく、要件の変更に対処する必要があります。
これは非常に古典的な最適化方法です。
• Map と同様に組織のデータを使用して、すべての製品を保存できます。ここでは、ストレージ用のオブジェクトを直接作成します。

こうすることで、次回別の製品を追加する必要があるときに、
• getPrice のロジックを変更する必要がなくなります。もちろん、実際には、foodMap を使用する場所に直接使用する人が増えています。この考えを表現するために、簡単な例を示しました。
それから、クラスメートの中には、文字列だけを
• key 使いたくないなら、new Map を使えばいいのではないかと尋ねる人もいます。アイデアは、ほぼ同じです。変更を保存するために拡張された追加のエンティティ。

パイプライン操作で冗長ループを置き換える

マイラオ料理のリストはこんな感じです

セット 1 に属する食べ物を見つけたい場合、どうやって見つけますか?
• 上記は以前よく使用した方法ですが、これを
• for ループの代わりに filter と map に置き換えると、コードがより合理化され、セマンティクスがより明確になるため、配列が最初に フィルター処理され、次に 再編成されたであることが一目でわかります。

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

引き続き上記の例ですが、この食品を使用する場合は、 object

find
• の使用は、属性値に基づいて配列内の特定の食品を検索するときに役立ちます。

冗長ループの置換を含む

これらは、上記の 2 つの詳細と似ています。書き換える必要のない組み込み関数なので、上手に使えば時間を大幅に節約できます。

• 誰もが知っているように、
カンフーラオタンのキャベツ漬け牛肉麺
• のボウルには、キャベツの漬け物、麺、牛肉の角切り#が含まれています。 ##、Cigarette Butt、Foot Skin の場合、このサーフェスに足の皮膚があるかどうかを確認する関数を使用したいのですが、どうすればもっと簡潔に記述できますか?

同様に、

カンフーのキャベツ漬け牛肉麺

をこのようにプレイできるだけでなく、類似したものはすべて次の場所にあります。配列 特定の要素に対する操作は、
• includes 関数を使用して呼び出すことができます。
結果の戻り値

戻り値を持つ関数を作成するとき、または一部の長い関数の場合でも、戻り値変数の名前を付けるのに通常苦労します。では、変数を使用せず、直接

return

を使用します。次回このコードを参照するときにロジックを再度明確にする必要があるため、この習慣は実際には悪いです。
• 一般に、小さな関数では、戻り値として result
を使用できます。

Returnearly

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

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

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

• バックエンドから返されたデータを取得する場合によく発生します。データは一部の属性に従って処理されますが、処理する属性が少ない場合、多くの学生は最初の方法の使用に慣れています。
• しかし、実際には、この習慣は良くありません。前回の記事で述べたように、この関数が将来依存関係属性を追加する必要があるかどうかわからないときは、オブジェクトの整合性を維持する必要があるからです。 #getDocDetail が icon と content だけでなく、将来 title も使用する場合は、変更を受け入れる方法を学びましょう、date およびその他の属性を使用するため、完全なオブジェクトを直接渡すこともできます。これにより、パラメーター リストが短縮されるだけでなく、コードが読みやすくなります。

#演算子の賢い使い方

新しい変数を作成する必要がある場合、次のことが必要になることがあります。確認してください。 値が参照する変数が

null
• または未定義の場合、簡易記述方法が使用できます。

最後に書きました

まずは、読んでいただいた皆様、ありがとうございます 今回は記事をシェアさせていただきます非常に基本的な最適化方法をいくつか紹介しましたので、皆さんのお役に立てれば幸いです。

• [関連ビデオチュートリアルの推奨事項:

Web フロントエンド

]

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