Plusieurs conseils pratiques d’optimisation JavaScript à connaître

Comment démarrer rapidement avec VUE3.0 : Entrez dans l'apprentissage

"Difficulté :?" " Temps de lecture recommandé : 5 min "

La vidéo principale

• Une fois que nous avons écrit plus de deux fonctions if...else

.

• , nous devrions réfléchir à l'existence d'une meilleure méthode d'optimisation.
• Par exemple, nous devons maintenant calculer le prix de la nourriture à Mai Lao en fonction du nom, vous pouvez le faire.

• Cette façon d'écrire fera que le corps de la fonction aura beaucoup d'instructions de jugement conditionnel. Lorsque nous voudrons ajouter un produit la prochaine fois, nous devrons modifier la logique dans la fonction et ajouter une instruction if...else . ouvrir et fermer dans une certaine mesure.Le principe est que lorsque nous avons besoin d'ajouter une logique, nous devons essayer de résoudre le changement d'exigences en étendant l'entité logicielle au lieu de modifier le code existant pour compléter le changement.
• Il s'agit d'une méthode d'optimisation très classique. On peut utiliser une structure de données similaire à Map pour sauvegarder tous les produits. Ici, on crée directement un objet pour le stocker.

• De cette façon, nous n'avons pas besoin de changer la logique de getPrice lorsque nous devons ajouter un autre produit la prochaine fois. Bien sûr, de plus en plus de gens ici aiment utiliser foodMap directement là où il est utilisé. cette idée.
• Ensuite, certains étudiants demanderont à ce moment-là, que se passe-t-il si je ne veux pas utiliser uniquement des chaînes pour key ? Alors vous pouvez utiliser new Map L'idée est similaire et une entité supplémentaire est étendue pour stocker les modifications.

Les opérations de pipeline remplacent les boucles redondantes.

• Il existe une telle liste alimentaire de Mai Moulao.

• Si vous voulez trouver la nourriture qui appartient à l’ensemble 1, comment la trouveriez-vous ?
• Ce qui précède est une méthode que nous avons souvent utilisée auparavant. Évidemment, notre remplacement par filter et map au lieu d' for boucle for peut non seulement rationaliser le code, mais également rendre la sémantique plus claire. Le tableau est过滤en premier, puis重组.

Find remplace la boucle redondante

• ou l'exemple ci-dessus. Si nous voulons trouver un aliment spécifique en fonction de la valeur de l'attribut dans ce tableau d'objets alimentaires, l'utilisation de find apparaît.

inclut remplace les boucles redondantes

• .Semblable aux deux détails ci-dessus, ce sont toutes des fonctions existantes, c'est-à-dire des fonctions intégrées qui n'ont pas besoin d'être réécrites par nous. Leur utilisation habile permettra de gagner beaucoup de temps.
• Comme nous le savons tous, un bol de nouilles au bœuf marinées Kang Fu Lao Tan se compose de choucroute , de nouilles , de cubes de bœuf , de mégots de cigarettes et de peau de pied . Comment pouvons-nous utiliser une fonction pour vérifier s'il y a de la peau de pied dans cette nouille. nous l'écrivons de manière plus concise ?

• De même, non seulement la choucroute et les nouilles au bœuf de Kang Fu peuvent être jouées de cette manière, mais toutes les opérations similaires de recherche d'éléments spécifiques dans un tableau peuvent être appelées à l'aide de la fonction includes .

résultat valeur de retour

• Lorsque nous écrivons certaines fonctions avec des valeurs de retour, nous avons souvent du mal à nommer la variable de valeur de retour. Même pour certaines fonctions longues, nous n'utilisons pas de variables mais return directement .Cette habitude est en fait mauvaise parce que nous devons clarifier la logique. encore une fois lorsque nous ferons référence à ce code la prochaine fois.
• Habituellement, dans une petite fonction, nous pouvons utiliser result comme valeur de retour.

Retour anticipé

• Cependant, l'utilisation 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 empêcher les collègues suivants de lire des programmes redondants.

• Dans l'exemple suivant, lorsque notre selectedKey n'existe pas, nous devons return immédiatement, afin de ne pas avoir besoin de continuer à lire le code suivant, sinon cela augmentera considérablement les coûts de lecture face à des fonctions plus complexes.

Pour garder l'objet intact

• , souvent lorsque nous recevons les données renvoyées par le backend via une requête, elles seront traitées en fonction de certains attributs. S'il y a peu d'attributs à traiter, de nombreux étudiants seront habitués à utiliser le. première méthode.
• Mais en fait, cette habitude est mauvaise, car lorsque vous n'êtes pas sûr que cette fonction doive ajouter des attributs de dépendance à l'avenir, vous devez conserver l'intégrité de l'objet. Comme je l'ai mentionné dans mon dernier article, apprenez à accepter les changements . getDocDetail ne se limite pas à l'utilisation icon et content , il peut y avoir des attributs tels que title et date à l'avenir, nous pourrions donc aussi bien transmettre directement l'objet complet, ce qui non seulement raccourcira la liste des paramètres mais rendra également le code plus lisible.

Utilisation intelligente des opérateurs

• Lorsque nous devons créer une nouvelle variable, et parfois vérifier si la variable référencée par sa valeur est null ou indéfinie, nous pouvons utiliser une écriture simple.

À la fin de la rédaction

• , tout d'abord, je voudrais vous remercier tous d'avoir lu ceci. Je vais partager cet article ici et résumer quelques méthodes d'optimisation très basiques, j'espère que cela pourra aider tout le monde.

[Tutoriels vidéo associés recommandés : front-end Web]

Ci-dessus sont les détails de plusieurs conseils pratiques d'optimisation JavaScript qui méritent d'être connus. Pour en savoir plus, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !