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面条代码

• 一旦当我们写到超过两个if...else的函数的时候就该想想是否有更好的优化方法。【相关推荐：javascript学习教程】
• 比如现在需要让我们根据名称计算出麦某劳的食品价格，你可能会这么做。

• 这样的写法会让函数体有很多的条件判断语句，而当我们想下次增加一个商品的时候就需要修改函数内的逻辑增加一个if...else语句，这一定程度上也违反了开闭原则,当我们需要增加一个逻辑的时候要尽量通过扩展软件实体来解决需求变化，而不是通过修改已有的代码来完成变化。
• 这是很经典的优化方式，我们可以使用一个类似Map机构的数据来保存所有商品，这里我们直接建立一个对象来存储。

• 这样我们下次需要再增加一个商品时就不需要改动getPrice的逻辑了，当然了这里其实更多人喜欢直接在用的地方直接使用foodMap，我这里只是简单举了个例子表述这个思路。
• 那么这时候就有同学会问了，如果我不想key只用字符串呢，这时候你就可以用到new Map了，思路也是差不多的，额外扩展一个实体来存储变化。

管道操作取代冗余循环

• 有这么一个麦某劳食物列表

• 如果你想找出属于套餐1的食物，你会怎么找呢？
• 上面这种是我们以前经常使用的方法，显然我们替换成使用filter与map来取代for循环不仅可以使代码更精简，还可以使语义更加明确，这样我们一下就可以看出是先对数组过滤再重组。

find取代冗余循环

• 还是上面的例子，如果我们要在这个食品对象数组中按照属性值查找特定的食物时，find的用处就出来了。

includes取代冗余循环

• 和上面两个细节类似的这些都是既有的函数也就是不用我们重新写的内置函数，巧用它会节省很多时间。
• 众所周知，一碗康某傅老坛酸菜牛肉面有酸菜，面，牛肉粒，烟头和脚皮组成，那我们想用函数证实这个面里面是否有脚皮我们怎么写会比较简洁呢？

• 同样的，不止是康某傅的酸菜牛肉面可以这样耍，所有类似的在数组里面找到特定元素的操作都可以使用includes函数来调用。

result返回值

• 我们通常在写一些拥有返回值的函数的时候常常会以返回值变量命名而纠结，甚至对于一些长函数的时候还不使用变量而是直接return，这样的习惯其实是不好的，因为等我们下次再去参照这段代码的时候还需要重新捋清逻辑。
• 通常的，在一个小函数中，我们可以使用result

Long métrage

Réduire le code de nouilles if...else

• Une fois que nous écrivons plus de deux if...else fonction, vous devriez vous demander s'il existe une meilleure méthode d'optimisation. [Recommandations associées : tutoriel d'apprentissage Javascript]🎜
• Par exemple, maintenant nous devez calculer les prix des denrées alimentaires à Mai Lao en fonction des noms, ce que vous pourriez faire. 🎜🎜🎜🎜
• Cette façon d'écrire fera que le corps de la fonction aura beaucoup d'instructions de jugement conditionnel, et lorsque nous voudrons ajouter un produit la prochaine fois, nous devrons modifier la logique dans la fonction et ajouter un 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. 🎜
• Il s'agit d'une méthode d'optimisation très classique. Nous pouvons utiliser une structure de données similaire à Map pour sauvegarder tous les produits. Ici, nous créons directement un objet pour le stockage. 🎜🎜🎜🎜
• De cette façon, nous n'avons pas besoin de changer la logique de 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. 🎜
• Ensuite, certains camarades de classe me demanderont à ce moment-là : que se passe-t-il si je ne veux pas utiliser uniquement des chaînes pour key ? Ensuite, vous pouvez utiliser new Map, idée. presque la même chose, avec une entité supplémentaire étendue pour stocker les modifications. 🎜🎜

  🎜Le fonctionnement du pipeline remplace les boucles redondantes🎜

  • Il existe une telle liste de plats Mai Moulau🎜🎜🎜🎜
    • Si vous voulez trouver Comment trouvez-vous la nourriture qui appartient à l'ensemble 1 ? 🎜
    • Ce qui précède est une méthode que nous utilisons souvent auparavant, évidemment, si nous la remplaçons par 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🎜
      • Toujours l'exemple ci-dessus, si nous voulons trouver un aliment spécifique en fonction de la valeur de l'attribut dans ce tableau d'aliments object , l'utilité de find ressort. 🎜🎜🎜🎜🎜inclut le remplacement des boucles redondantes🎜
        • Similaire aux deux détails ci-dessus, ce sont des fonctions existantes, c'est-à-dire des fonctions intégrées qui n'ont pas besoin à réécrire par nos soins, son utilisation judicieuse permettra de gagner beaucoup de temps. 🎜
        • Comme nous le savons tous, un bol de 🎜Nouilles au bœuf à la choucroute Kang Fu Lao Tan🎜 se compose de 🎜choucroute🎜, 🎜nouilles🎜, 🎜cubes de bœuf🎜, 🎜mégots de cigarettes🎜 et 🎜peau de pied🎜, alors nous voulons utiliser une fonction pour vérifier cette nouille Comment pouvons-nous écrire de manière plus concise s'il y a de la peau du pied à l'intérieur ? 🎜🎜🎜🎜
        • De même, non seulement les 🎜nouilles de bœuf au chou mariné de Kang Fu🎜 peuvent être jouées comme ceci, 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. 🎜🎜

          🎜valeur de retour du résultat🎜

          • 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, les variables ne sont pas utilisées mais directement retournent. Cette habitude est en fait mauvaise, car nous devrons la réécrire la prochaine fois que nous ferons référence à ce code. 🎜
          • Généralement, dans une petite fonction, nous pouvons utiliser result comme valeur de retour. 🎜🎜🎜🎜🎜

            Retour anticipé

            • 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.

            

            • Gardez l'objet intact

            Souvent, lorsque nous recevons les données renvoyées par le backend via la requête, elles seront traitées en fonction de certains des attributs s'il y en a peu. attributs qui doivent être traités, de nombreux étudiants Vous vous habituerez à utiliser la première méthode.

            Mais en fait, cette habitude est mauvaise, car lorsque vous n'êtes pas sûr que la fonction doive ajouter des attributs de dépendance à l'avenir, vous devez garder l'objet intact. Comme je l'ai mentionné dans mon dernier article, 🎜Apprenez à accepter le changement🎜. , si 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!