Einige wissenswerte praktische Tipps zur JavaScript-Optimierung

Bei der Arbeit können wir oft durch einige kleine Details die Lesbarkeit des Codes verbessern und den Code eleganter aussehen lassen. Dieser Artikel wird Ihnen einige praktische Tipps zur JavaScript-Optimierung geben, die Sie auf einen Blick verstehen können. Ich hoffe, er wird Ihnen hilfreich sein!

「Schwierigkeitsgrad:?」 「Empfohlene Lesezeit: 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

Spielfilm

Reduzieren Sie den if...else-Nudelcode

• Sobald wir mehr als zwei if...elseschreiben > Funktion sollten Sie darüber nachdenken, ob es eine bessere Optimierungsmethode gibt. [Verwandte Empfehlungen: Javascript-Lern-Tutorial]🎜
• Zum Beispiel jetzt wir Sie müssen die Lebensmittelpreise in Mai Lao anhand der Namen berechnen, was Sie auch tun könnten. 🎜🎜🎜🎜
• Diese Schreibweise führt dazu, dass der Funktionskörper viele bedingte Beurteilungsanweisungen enthält. Wenn wir das nächste Mal ein Produkt hinzufügen möchten, müssen wir die Logik in der Funktion ändern und einen if hinzufügen. ..else-Anweisung verstößt bis zu einem gewissen Grad auch gegen das „Öffnungs- und Schließprinzip“. Wenn wir eine Logik hinzufügen müssen, sollten wir unser Bestes geben, um die Änderung der Anforderungen zu lösen, indem wir die Software-Entität erweitern Ändern des vorhandenen Codes, um die Änderung abzuschließen. 🎜
• Dies ist eine sehr klassische Optimierungsmethode. Wir können eine Datenstruktur ähnlich wie Map verwenden, um alle Produkte zu speichern. 🎜🎜🎜🎜
• Auf diese Weise müssen wir die Logik von getPrice nicht ändern, wenn wir das nächste Mal ein weiteres Produkt hinzufügen müssen. Natürlich bevorzugen mehr Leute hier die direkte Verwendung von foodMap wo sie verwendet werden , ich habe nur ein einfaches Beispiel gegeben, um diese Idee auszudrücken. 🎜
• Dann werden einige Klassenkameraden zu diesem Zeitpunkt fragen: Wenn ich nicht nur Zeichenfolgen für key verwenden möchte, können Sie new Map verwenden, die Idee fast das Gleiche, mit einer zusätzlichen Entität, die zum Speichern von Änderungen erweitert wurde. 🎜🎜

  🎜Pipeline-Operationen ersetzen redundante Schleifen🎜

  • Es gibt so eine Liste von Mai Moulau-Lebensmitteln🎜🎜🎜🎜
    • Wenn Sie suchen möchten out Wie findet man das Essen, das zu Set 1 gehört? 🎜
    • Die obige Methode verwenden wir offensichtlich oft, wenn wir sie durch filter und map ersetzen, um die for-Schleife zu ersetzen Dadurch wird nicht nur der Code rationalisiert, sondern auch die Semantik klarer, sodass wir auf einen Blick erkennen können, dass das Array zuerst gefiltert und dann reorganisiert wird. 🎜🎜🎜🎜🎜find ersetzt redundante Schleifen🎜
      • Noch das obige Beispiel, wenn wir ein bestimmtes Lebensmittel anhand des Attributwerts in diesem Lebensmittelobjekt-Array finden möchten , kommt der Nutzen von find zum Vorschein. 🎜🎜🎜🎜🎜beinhaltet das Ersetzen redundanter Schleifen🎜
        • Ähnlich wie bei den beiden oben genannten Details handelt es sich hierbei um vorhandene Funktionen, also um integrierte Funktionen, die nicht benötigt werden Die von uns neu zu schreibende Funktion spart viel Zeit. 🎜
        • Wie wir alle wissen, besteht eine Schüssel 🎜Kang Fu Lao Tan Sauerkraut-Rindfleischnudeln🎜 aus 🎜Sauerkraut🎜, 🎜Nudeln🎜, 🎜Rindfleischwürfeln🎜, 🎜Zigarettenstummeln🎜 und 🎜Fußhaut🎜, dann wollen wir Verwenden Sie eine Funktion, um diese Nudel zu überprüfen. Wie können wir prägnanter schreiben, ob sich darin Fußhaut befindet? 🎜🎜🎜🎜
        • In ähnlicher Weise können nicht nur „Kang Fus eingelegte Kohl-Rindfleischnudeln“ auf diese Weise gespielt werden, sondern alle ähnlichen Operationen zum Suchen bestimmter Elemente in einem Array können mit der Funktion includes aufgerufen werden. 🎜🎜

          🎜Ergebnisrückgabewert🎜

          • Wenn wir einige Funktionen mit Rückgabewerten schreiben, fällt es uns oft schwer, die Rückgabewertvariable zu benennen, selbst für Bei einigen langen Funktionen werden Variablen nicht verwendet, sondern direkt zurückgegeben. Diese Angewohnheit ist eigentlich schlecht, da wir sie beim nächsten Mal, wenn wir auf diesen Code verweisen, neu schreiben müssen. 🎜
          • Im Allgemeinen können wir in einer kleinen Funktion result als Rückgabewert verwenden. 🎜🎜🎜🎜🎜

            Frühe Rückgabe

            • Die Verwendung von result als Rückgabewert oben gilt jedoch nicht für alle Situationen. Manchmal müssen wir den Funktionskörper vorzeitig beenden, um zu verhindern, dass nachfolgende Kollegen redundante Programme lesen. result作为返回值并不适用于所有情况，往往有些时候我们需要提前结束函数体来避免后面的同事阅读多余的程序。

            • 如下的例子中当我们selectedKey不存在的时候应该立即return，这样就不用继续阅读下面的代码，否则面对更复杂的函数时会增加很多的阅读成本。

            

            保持对象完整

            • 经常在我们通过请求拿到后端返回的数据会根据其中一些属性进行处理，如果需要处理的属性少的时候很多同学会习惯使用第一种方法。
            • 但其实这种习惯是不好的，因为当你无法确定这个函数以后还需不需要增加依赖属性的时候应该保持对象的完整，就像我上篇文章提到的，学会拥抱变化，假如getDocDetail不止要用到icon和content,可能以后还会有title，date等属性，所以我们不如直接将完整对象传入，不仅增加缩短参数列表还会让代码更易读。

            

            巧用运算符

            • 当我们需要创建新变量时, 有时需要检查为其值引用的变量是否为null

            Wenn im folgenden Beispiel unser selectedKey nicht existiert, sollten wir sofort zurückkehren, damit wir den folgenden Code nicht weiter lesen müssen, sonst tun wir es wird mit komplexeren Funktionen konfrontiert sein. Dies wird die Kosten für das Lesen erheblich erhöhen.

            

            • Halten Sie das Objekt intakt

            Wenn wir die vom Backend über die Anfrage zurückgegebenen Daten erhalten, werden sie häufig entsprechend einigen Attributen verarbeitet Attribute, die verarbeitet werden müssen, viele Schüler werden sich an die Verwendung der ersten Methode gewöhnen.

            Aber tatsächlich ist diese Angewohnheit schlecht, denn wenn Sie nicht sicher sind, ob die Funktion in Zukunft Abhängigkeitsattribute hinzufügen muss, sollten Sie das Objekt intakt lassen. Wie ich in meinem letzten Artikel erwähnt habe: 🎜Lernen Sie, Veränderungen anzunehmen🎜 Wenn getDocDetail nicht nur icon und content verwendet, kann es auch title und date enthalten Future. und andere Attribute, daher könnten wir genauso gut das komplette Objekt direkt übergeben, was nicht nur die Parameterliste verkürzt, sondern auch den Code besser lesbar macht. 🎜🎜🎜🎜🎜Intelligenter Einsatz von Operatoren🎜🎜🎜🎜Wenn wir eine neue Variable erstellen müssen, müssen wir manchmal prüfen, ob die Variable, auf die durch ihren Wert verwiesen wird, null ist oder undefiniert können Sie einfaches Schreiben verwenden. 🎜🎜🎜🎜🎜🎜Am Ende geschrieben🎜🎜🎜Zuallererst möchte ich mich bei Ihnen allen für das Lesen bedanken. Dieser Artikel fasst einige sehr grundlegende Optimierungsmethoden zusammen. 🎜🎜🎜【Empfohlene verwandte Video-Tutorials: 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonEinige wissenswerte praktische Tipps zur JavaScript-Optimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!