Vorwort: Kürzlich habe ich einige Artikel zum Vereinfachen von JS-Code gelesen. Ich denke, einer davon ist ziemlich gut, aber er ist auf Englisch. Ich habe auch einige chinesische Übersetzungen gelesen. Einer davon ist, dass die Wort-für-Wort-Übersetzung zu steif ist und nicht zu meiner eigenen wird. Der andere ist, dass der Autor neue Inhalte hinzugefügt hat, diese aber nicht rechtzeitig aktualisiert hat. Also habe ich sie in meiner eigenen Sprache in diesen Artikel übersetzt. Die Merkmale dieses Artikels sind hauptsächlich prägnant und prägnant. Wenn Sie mehrere Variablen gleichzeitig deklarieren, können Sie es auf eine Zeile kürzen://Langschrift lass x; sei y = 20; //Kurzschrift sei x, y = 20; Durch Destrukturierung können mehreren Variablen gleichzeitig Werte zugewiesen werden//Langschrift sei a, b, c; ein = 5; b = 8; c = 12; //Kurzschrift sei [a, b, c] = [5, 8, 12]; Verwenden des ternären Operators zur Vereinfachung von „if else“//Langschrift sei Mark = 26; lass resultieren; wenn (Punkte >= 30) { Ergebnis = ,Bestanden‘; } anders { Ergebnis = ‚Fehlgeschlagen‘; } //Kurzschrift let result = marks >= 30 ? 'Bestanden' : 'Nicht bestanden'; Verwenden Sie den Operator ||, um Variablen Standardwerte zuzuweisen Das Wesentliche besteht darin, die Eigenschaften des Operators || zu verwenden. Wenn das Ergebnis des vorherigen Ausdrucks in einen Booleschen Wert von //Langschrift lass Bildpfad; let Pfad = getImagePath(); if (Pfad !== null && Pfad !== undefiniert && Pfad !== '') { imagePath = Pfad; } anders { Bildpfad = "default.jpg"; } //Kurzschrift let imagePath = getImagePath() || 'default.jpg'; Verwenden des &&-Operators zum Vereinfachen von if-AnweisungenWenn eine Funktion beispielsweise nur aufgerufen wird, wenn eine bestimmte Bedingung erfüllt ist, kann sie verkürzt werden auf //Langschrift if (istangemeldet) { geheZuHomepage(); } //Kurzschrift istangemeldet && geheZurHomepage(); Verwenden der Destrukturierung zum Vertauschen der Werte zweier Variablensei x = "Hallo", y = 55; //Langschrift konstantes Temp = x; x = y; y = Temperatur; //Kurzschrift [x, y] = [y, x]; Anwenden von Pfeilfunktionen zum Vereinfachen von Funktionen//Langschrift Funktion addieren(Zahl1, Zahl2) { gibt num1 + num2 zurück; } //Kurzschrift const add = (Zahl1, Zahl2) => Zahl1 + Zahl2; Beachten Sie den Unterschied zwischen Pfeilfunktionen und normalen Funktionen Vereinfachen Sie Ihren Code mithilfe von Zeichenfolgenvorlagen Verwenden Sie Vorlagenzeichenfolgen anstelle der Verkettung von Rohzeichenfolgen. //Langschrift console.log('Sie haben einen verpassten Anruf von ' + Nummer + ' um ' + Uhrzeit erhalten); //Kurzschrift console.log(`Sie haben um ${time} einen verpassten Anruf von ${number} erhalten`); Mehrzeilige Zeichenfolgen können auch durch Zeichenfolgenvorlagen vereinfacht werden//Langschrift console.log('JavaScript, oft als JS abgekürzt, ist ein\n' + 'Programmiersprache, die konform ist mit \n' + 'ECMAScript-Spezifikation. JavaScript ist hochrangig,\n' + „Oft just-in-time kompiliert und multiparadigmatisch.“ ); //Kurzschrift console.log(`JavaScript, oft als JS abgekürzt, ist ein Programmiersprache, die den ECMAScript-Spezifikation. JavaScript ist hochrangig, oft Just-in-Time kompiliert und multiparadigmatisch.` ); Für das Multi-Value-Matching können alle Werte in einem Array platziert und mithilfe von Array-Methoden vereinfacht werden//Langschrift wenn (Wert === 1 || Wert === 'eins' || Wert === 2 || Wert === 'zwei') { // Code ausführen } // Kurzschrift 1 if ([1, 'eins', 2, 'zwei'].indexOf(Wert) >= 0) { // Führe Code aus } // Kurzschrift 2 if ([1, 'eins', 2, 'zwei'].includes(Wert)) { // Code ausführen } Verwenden der prägnanten Syntax von ES6-ObjektenBeispiel: Wenn Attributname und Variablenname gleich sind, können sie zu einem abgekürzt werden. lass Vorname = "Amitav"; let Nachname = "Misha"; //Langschrift let obj = {Vorname: Vorname, Nachname: Nachname}; //Kurzschrift let obj = {Vorname, Nachname}; Verwenden von unären Operatoren zum Vereinfachen der Konvertierung von Zeichenfolgen in Zahlen//Langschrift lass total = parseInt('453'); lass Durchschnitt = parseFloat('42.6'); //Kurzschrift sei total = +'453'; sei Durchschnitt = +'42,6'; Verwenden Sie die Methode repeat(), um die Wiederholung einer Zeichenfolge zu vereinfachen//Langschrift lass str = ''; für(lass i = 0; i < 5; i++) { str += 'Hallo '; } console.log(str); // Hallo, Hallo, Hallo, Hallo, Hallo // Kurzschrift 'Hallo '.repeat(5); // Ich möchte mich 100 Mal bei dir entschuldigen! 'Entschuldigung\n'.repeat(100); Verwenden Sie doppelte Sternchen anstelle von Math.pow()//Langschrift const power = Math.pow(4, 3); // 64 // Kurzschrift Konstante Leistung = 4**3; // 64 Verwenden Sie den doppelten Tilde-Operator (~~) anstelle von Math.floor()//Langschrift const floor = Math.floor(6.8); // 6 // Kurzschrift const Boden = ~~6,8; // 6 Beachten Sie, dass ~~ nur auf Zahlen kleiner als 2147483647 anwendbar ist Verwenden des Spread-Operators (...) zur Vereinfachung von Code Vereinfachung der Array-Zusammenführungsei arr1 = [20, 30]; //Langschrift lass arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80] //Kurzschrift lass arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80] Kopieren eines einschichtigen Objektssei obj = {x: 20, y: {z: 30}}; //Langschrift const makeDeepClone = (obj) => { lass neuesObjekt = {}; Objekt.Schlüssel(Objekt).Map(Schlüssel => { wenn(Typ von Objekt[Schlüssel] === 'Objekt'){ neuesObjekt[Schlüssel] = makeDeepClone(Objekt[Schlüssel]); } anders { neuesObjekt[Schlüssel] = Objekt[Schlüssel]; } }); gib neues Objekt zurück; } const cloneObj = makeDeepClone(obj); //Kurzschrift : Konstanten cloneObj = JSON.parse(JSON.stringify(obj)); //Abkürzung für ein einstufiges Objekt let obj = {x: 20, y: 'hallo'}; const cloneObj = {...obj}; Finden der Maximal- und Minimalwerte in einem Array// Kurzschrift const arr = [2, 8, 15, 4]; Math.max(...arr); // 15 Math.min(...arr); // 2 Verwenden Sie for in und for of, um die normale for-Schleife zu vereinfachensei arr = [10, 20, 30, 40]; //Langschrift für (sei i = 0; i < arr.length; i++) { Konsole.log(arr[i]); } //Kurzschrift //für die Schleife für (const val of arr) { konsole.log(Wert); } //für in Schleife für (const index in arr) { Konsole.log(arr[index]); } Vereinfachen Sie das Abrufen eines Zeichens in einer Zeichenfolgelet str = "jscurious.com"; //Langschrift str.charAt(2); // c //Kurzschrift str[2]; // c Entfernen von Objekteigenschaftensei obj = {x: 45, y: 72, z: 68, p: 98}; // Langschrift obj.x löschen; lösche obj.p; console.log(obj); // {y: 72, z: 68} // Kurzschrift sei {x, p, ...neuesObjekt} = Objekt; console.log(neuesObj); // {y: 72, z: 68} Verwenden Sie arr.filter(Boolean), um den Wert falsey des Array-Mitglieds herauszufilternlet arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefiniert, 0,5, falsch]; //Langschrift let filterArray = arr.filter(Funktion(Wert) { wenn (Wert) Rückgabewert; }); // FilterArray = [12, "xyz", -25, 0,5] // Kurzschrift Lassen Sie filterArray = arr.filter(Boolean); // FilterArray = [12, "xyz", -25, 0,5] Damit ist dieser Artikel über 20 Tipps zur JS-Abkürzung zur Verbesserung der Arbeitseffizienz abgeschlossen. Weitere relevante Tipps zur JS-Abkürzung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP
>>: In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt
Für das, was ich heute schreiben werde, lief das ...
Vorwort Nachdem ich den vorherigen Artikel über d...
Erst Code, dann Text Code kopieren Der Code lautet...
1. Einleitung Die Anforderung besteht darin, die ...
Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...
In diesem Artikel finden Sie das Installations-Tu...
Da immer mehr Entwickler SASS verwenden, müssen w...
1. Ordner löschen Beispiel: rm -rf /usr/java Das ...
In den letzten Tagen war der Zugriff auf die Webs...
In diesem Artikelbeispiel wird der spezifische JS...
Zunächst stellt sich häufig die Frage: Welche Bez...
Unter Linux ist alles eine Datei, daher besteht d...
Das Computersystem wurde neu installiert und die ...
Da die Version, die ich beim Lernen verwendet hab...
Lösung für „Curl-config konnte nicht ausgeführt w...