Maison > Article > interface Web > Plusieurs conseils pratiques d’optimisation JavaScript à connaître
Dans notre travail, nous pouvons souvent augmenter la lisibilité du code grâce à quelques petits détails et rendre le code plus élégant. Cet article partagera avec vous quelques conseils pratiques d’optimisation JavaScript que vous pourrez comprendre en un coup d’œil. J’espère qu’il vous sera utile !
「Difficulté :?」 「Durée de lecture recommandée : 5min
」min
」
if...else
的函数的时候就该想想是否有更好的优化方法。【相关推荐:javascript学习教程】if...else
语句,这一定程度上也违反了开闭原则,当我们需要增加一个逻辑的时候要尽量通过扩展软件实体来解决需求变化,而不是通过修改已有的代码来完成变化。Map
机构的数据来保存所有商品,这里我们直接建立一个对象来存储。getPrice
的逻辑了,当然了这里其实更多人喜欢直接在用的地方直接使用foodMap
,我这里只是简单举了个例子表述这个思路。key
只用字符串呢,这时候你就可以用到new Map
了,思路也是差不多的,额外扩展一个实体来存储变化。filter
与map
来取代for
循环不仅可以使代码更精简,还可以使语义更加明确,这样我们一下就可以看出是先对数组过滤
再重组
。find
的用处就出来了。includes
函数来调用。return
,这样的习惯其实是不好的,因为等我们下次再去参照这段代码的时候还需要重新捋清逻辑。result
Réduire le code de nouilles if...else
if...else
fonction, vous devriez vous demander s'il existe une meilleure méthode d'optimisation. [Recommandations associées : tutoriel d'apprentissage Javascript]🎜if. ..else
, cela viole également le 🎜Principe d'ouverture et de fermeture🎜 dans une certaine mesure. Lorsque nous devons ajouter une logique, nous devons faire de notre mieux pour résoudre le changement d'exigences en étendant l'entité logicielle au lieu de. modifier le code existant pour compléter le changement. 🎜Map
pour sauvegarder tous les produits. Ici, nous créons directement un objet pour le stockage. 🎜🎜🎜🎜getPrice
la prochaine fois que nous devons ajouter un autre produit. Bien sûr, davantage de personnes ici aiment utiliser foodMap. directement là où ils sont utilisés
, je viens de donner un exemple simple pour exprimer cette idée. 🎜key
? Ensuite, vous pouvez utiliser new Map
, idée. presque la même chose, avec une entité supplémentaire étendue pour stocker les modifications. 🎜🎜filter
et map
pour remplacer la boucle for
. , cela permettra non seulement de rationaliser le code, mais également de rendre la sémantique plus claire, de sorte que nous puissions voir d'un coup d'œil que le tableau est d'abord filtré
puis réorganisé
. 🎜🎜🎜🎜🎜find remplace les boucles redondantes🎜find
ressort. 🎜🎜🎜🎜🎜inclut le remplacement des boucles redondantes🎜includes
. 🎜🎜retournent
. Cette habitude est en fait mauvaise, car nous devrons la réécrire la prochaine fois que nous ferons référence à ce code. 🎜result
comme valeur de retour. 🎜🎜🎜🎜🎜Cependant, l'utilisation de result
comme valeur de retour ci-dessus ne s'applique pas à toutes les situations. Parfois, nous devons mettre fin au corps de la fonction plus tôt pour éviter que les collègues suivants ne lisent des programmes redondants. result
作为返回值并不适用于所有情况,往往有些时候我们需要提前结束函数体来避免后面的同事阅读多余的程序。
如下的例子中当我们selectedKey
不存在的时候应该立即return
,这样就不用继续阅读下面的代码,否则面对更复杂的函数时会增加很多的阅读成本。
getDocDetail
不止要用到icon
和content
,可能以后还会有title
,date
等属性,所以我们不如直接将完整对象传入,不仅增加缩短参数列表还会让代码更易读。null
Dans l'exemple suivant, lorsque notre selectedKey
n'existe pas, nous devons revenir
immédiatement, afin de ne pas avoir besoin de continuer à lire le code suivant, sinon nous sera confronté à des fonctions plus complexes. Cela augmentera considérablement le coût de la lecture.
getDocDetail
utilise non seulement icon
et content
, il peut également inclure title
et date dans le future.
et d'autres attributs, nous pourrions donc aussi bien transmettre directement l'objet complet, ce qui non seulement raccourcit la liste des paramètres mais rend également le code plus lisible. 🎜🎜🎜🎜🎜Utilisation intelligente des opérateurs🎜🎜🎜🎜Lorsque nous devons créer une nouvelle variable, nous devons parfois vérifier si la variable référencée par sa valeur est null
ou undefined , vous pouvez utiliser une écriture simple. 🎜🎜🎜🎜🎜🎜Écrit à la fin🎜🎜🎜Tout d'abord, merci à tous d'avoir lu ceci. Cet article est partagé ici et résume plusieurs méthodes d'optimisation très basiques. J'espère qu'il pourra aider tout le monde. 🎜🎜🎜【Tutoriels vidéo associés recommandés : 🎜front-end web🎜】🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!