Techniken zur Reduzierung der Codezeilen und Beschleunigung der Entwicklung! Während der Entwicklung müssen wir oft einige Funktionen schreiben, wie z. B. Sortieren, Suchen, Finden eindeutiger Werte, Übergeben von Parametern, Austauschen von Werten usw. Hier habe ich einige technische Ressourcen aufgelistet, die ich gesammelt habe, damit Sie diese Funktionen wie ein Meister schreiben können! Diese Methoden werden Ihnen auf jeden Fall helfen:
Die meisten dieser JavaScript-Hacks verwenden Techniken ab ECMAScript 6 (ES2015), die neueste Version ist jedoch ECMAScript 11 (ES2020). Hinweis: Alle folgenden Tipps wurden in der Google Chrome-Konsole getestet. 1. Arrays deklarieren und initialisierenSie können ein Array einer bestimmten Größe mit einem Standardwert wie "", null oder 0 initialisieren. Sie haben diese möglicherweise für 1D-Arrays verwendet, aber wie initialisieren Sie ein 2D-Array/eine 2D-Matrix? const array = Array(5).fill(''); // Ausgabe (5) ["", "", "", "", "", "] const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); // Ausgabe (5) [Array(5), Array(5), Array(5), Array(5), Array(5)] 0: (5) [0, 0, 0, 0, 0] 1: (5) [0, 0, 0, 0, 0] 2: (5) [0, 0, 0, 0, 0] 3: (5) [0, 0, 0, 0, 0] 4: (5) [0, 0, 0, 0, 0] Länge: 5 2. Führen Sie die Summation, das Minimum und das Maximum durchVerwenden Sie die Reduce-Methode, um schnell grundlegende mathematische Operationen durchzuführen. konstantes Array = [5,4,7,8,9,2]; Summe Array.Reduce((a,b) => a+b); // Ausgabe: 35 Maximal Array.Reduce((a,b) => a>b?a:b); // Ausgabe: 9 Minimum Array.Reduce((a,b) => a<b?a:b); // Ausgabe: 2 3. Sortieren Sie Arrays von Zeichenfolgen, Zahlen oder Objekten Zum Sortieren von Zeichenfolgen stehen integrierte Methoden „sort()“ und „reverse()“ zur Verfügung. Wie sieht es jedoch mit dem Sortieren von Zahlen- oder Objekt-Arrays aus? Sortieren von Zeichenfolgen const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort(); // Ausgabe (4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse(); // Ausgabe (4) ["Steve", "Musk", "Kapil", "Joe"] Numerische Sortierung const array = [40, 100, 1, 5, 25, 10]; array.sort((a,b) => ab); // Ausgabe (6) [1, 5, 10, 25, 40, 100] array.sort((a,b) => ba); // Ausgabe (6) [100, 40, 25, 10, 5, 1] Objektsortierung const ObjektArr = [ { Vorname: 'Lazslo', Nachname: 'Jamf' }, { Vorname: 'Schwein', Nachname: 'Bodine' }, { Vorname: 'Pirat', Nachname: 'Lehrling' } ]; objectArr.sort((a, b) => a.Nachname.localeCompare(b.Nachname)); // Ausgabe (3) [{…}, {…}, {…}] 0: {Vorname: "Pig", Nachname: "Bodine"} 1: {Vorname: "Lazslo", Nachname: "Jamf"} 2: {Vorname: "Pirat", Nachname: "Lehrling"} Länge: 3 4. Müssen Sie unbrauchbare Werte aus einem Array herausfiltern?Werte wie 0, undefiniert, null, falsch, "", "" können mit folgendem Trick einfach gefiltert werden. const array = [3, 0, 6, 7, '', false]; array.filter(Boolean); // Ausgabe (3) [3, 6, 7] 5. Verwenden Sie logische Operatoren für verschiedene BedingungenWenn Sie die Verschachtelung reduzieren möchten, etwa bei if...else oder switch, können Sie die logischen Operatoren AND/OR verwenden. Funktion tuEtwas(arg1){ arg1 = arg1 || 10; // setze arg1 auf 10 als Standard, falls es nicht bereits festgelegt ist gib arg1 zurück; } sei foo = 10; foo === 10 && tuEtwas(); // ist dasselbe wie if (foo == 10) then doSomething(); // Ausgabe: 10 foo === 5 || tuEtwas(); // ist dasselbe wie if (foo != 5) then doSomething(); // Ausgabe: 10 6. Entfernen Sie doppelte WerteMöglicherweise haben Sie indexOf() in einer For-Schleife verwendet, die den ersten gefundenen Index zurückgibt, oder das neuere include(), das einen boolean-Wert aus einem Array zurückgibt, um doppelte Werte zu finden/entfernen. Hier haben wir zwei schnellere Methoden. Konstantes Array = [5,4,7,8,9,2,7,5]; array.filter((Element, idx, arr) => arr.indexOf(Element) === idx); // oder const nonUnique = [...neues Set(Array)]; // Ausgabe: [5, 4, 7, 8, 9, 2] 7. Erstellen Sie ein Zählerobjekt oder eine KarteHäufig müssen Sie das Problem lösen, indem Sie ein Zählerobjekt oder eine Karte erstellen, die die Variable verfolgt, wobei die Variable als Schlüssel und ihre Häufigkeit/Auftretenszahl als Wert verwendet wird. let string = "kapilalipak"; const Tabelle = {}; für (let char von string) { Tabelle[Zeichen]=Tabelle[Zeichen]+1 || 1; } // Ausgabe {k: 2, a: 3, p: 2, i: 2, l: 2} Und const countMap = neue Map(); für (lass i = 0; i < string.length; i++) { wenn (countMap.has(string[i])) { countMap.set(Zeichenfolge[i], countMap.get(Zeichenfolge[i]) + 1); } anders { zähleMap.set(Zeichenfolge[i], 1); } } // Ausgabe Karte(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2} 8. Ternärer Operator ist coolSie können verschachtelte if...elseif...elseif-Bedingungen vermeiden, indem Sie einen ternären Operator verwenden. Funktion Fieber(Temperatur) { Rücklauftemperatur > 97 ? ‚Besuchen Sie den Arzt!‘ : Temperatur < 97 °F? „Geh raus und spiel!!“ : temp === 97? „Machen Sie eine Pause!“; } // Ausgabe Fieber (97): "Ruhen Sie sich aus!" Fieber(100): "Besuchen Sie den Arzt!" 9. Eine For-Schleife ist schneller als eine herkömmliche Once-Schleife.for und for...in rufen standardmäßig den Index ab, Sie können aber stattdessen arr[index] verwenden. for...in akzeptiert auch Nicht-Zahlen, vermeiden Sie es also. forEach, for...of können Elemente direkt abrufen. forEach kann auch den Index abrufen, for...of jedoch nicht. 10. Zwei Objekte zusammenführenIn unserer täglichen Arbeit müssen wir häufig mehrere Objekte zusammenführen. const Benutzer = { Name: 'Kapil Raghuwanshi', Geschlecht: 'Männlich' }; const Hochschule = { Grundschule: 'Mani Primary School', Sekundarstufe: 'Lass Secondary School' }; const Fähigkeiten = { Programmierung: 'Extreme', Schwimmen: 'Durchschnittlich', Schlafen: 'Pro' }; const summary = {...Benutzer, ...Hochschule, ...Fähigkeiten}; // Ausgabe Geschlecht: „Männlich“ Name: „Kapil Raghuwanshi“ Grundschule: „Mani Primary School“ Programmierung: „Extrem“ Sekundarstufe: „Lass Secondary School“ Schlafen: "Pro" Schwimmen: "Durchschnittlich" 11. PfeilfunktionenPfeilfunktionsausdrücke sind eine kompakte Alternative zu herkömmlichen Funktionsausdrücken, sie unterliegen jedoch Einschränkungen und können nicht in allen Fällen verwendet werden. Da sie einen lexikalischen Gültigkeitsbereich (übergeordneten Gültigkeitsbereich) haben, verfügen sie nicht über eigene „this“ und „Argumente“ und verweisen daher auf die Umgebung, in der sie definiert sind. const person = { Name: 'Kapil', sagName() { gib diesen Namen zurück; } } person.sayName(); // Ausgabe "Kapil" Die Pfeilfunktion wird wie folgt umgeschrieben: const person = { Name: 'Kapil', sagName() { gib diesen Namen zurück; } } person.sayName(); // Ausgabe "Kapil" 12. Optionale VerkettungWenn der Wert vor dem Fragezeichen (?) nicht definiert oder null ist, beendet die optionale Verkettung (?) die Auswertung und gibt „undefiniert“ zurück. const Benutzer = { Mitarbeiter: Name: "Kapil" } }; Benutzer.Mitarbeiter?.Name; // Ausgabe: "Kapil" Benutzer.Beschäftigter?.Name; // Ausgabe: undefiniert Benutzer.Arbeitgeber.Name // Ausgabe: VM21616:1 Nicht abgefangener TypeError: Eigenschaft „Name“ von undefined kann nicht gelesen werden 13. Mischen Sie ein ArrayVerwenden Sie die integrierte Methode Math.random(). const Liste = [1, 2, 3, 4, 5, 6, 7, 8, 9]; list.sort(() => { gibt Math.random() zurück - 0,5; }); // Ausgabe (9) [2, 5, 1, 6, 9, 8, 4, 3, 7] // Ruf es noch einmal auf (9) [4, 1, 7, 5, 3, 8, 2, 9, 6] 14. Nullish-KoaleszenzoperatorDer Null-Koaleszenzoperator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null oder undefiniert ist, andernfalls gibt er seinen linken Operanden zurück. const foo = null ?? 'meine Schule'; // Ausgabe: „meine Schule“ const baz = 0 ?? 42; // Ausgabe: 0 15. Rest & Spread-BetreiberDiese mysteriösen 3 Punkte ... können „Ruhen“ oder „Ausbreiten“ bedeuten! Funktion meinSpaß(a, b, ...vieleWeitereArgs) { Argumente zurückgeben.Länge; } myFun("eins", "zwei", "drei", "vier", "fünf", "sechs"); // Ausgabe: 6 Und const parts = ['Schultern', 'Knie']; const lyrics = ['Kopf', ...Teile, 'und', 'Zehen']; Text; // Ausgabe: (5) ["Kopf", "Schultern", "Knie", "und", "Zehen"] 16. Standardparameterconst Suche = (arr, niedrig = 0, hoch = arr.Länge-1) => { Rendite hoch; } Suche([1,2,3,4,5]); // Ausgabe: 4 17. Konvertieren Sie Dezimalzahlen in Binärzahlen oder HexadezimalzahlenZur Lösung dieser Art von Problemen können wir einige integrierte Methoden wie .toPrecision() oder .toFixed() verwenden. num.toString(2); // Ausgabe: "1010" num.toString(16); // Ausgabe: "a" num.toString(8); // Ausgabe: "12" 18. Verwenden Sie Destrukturierung, um einfach zwei Werte zu vertauschensei a = 5; sei b = 8; [ein,b] = [b,ein] [ein,b] // Ausgabe (2) [8, 5] 19. Einzeilige PalindromprüfungFunktion checkPalindrome(str) { : return str == str.split('').reverse().join(''); } checkPalindrome('naman'); // Ausgabe: true 20. Konvertieren Sie die Eigenschaften eines Objekts in die Eigenschaften eines ArraysVerwenden Sie Object.entries(), Object.key() und Object.values(). const obj = { a: 1, b: 2, c: 3 }; Objekt.Einträge(obj); // Ausgabe (3) [Reihe(2), Reihe(2), Reihe(2)] 0: (2) ["ein", 1] 1: (2) ["b", 2] 2: (2) ["c", 3] Länge: 3 Objekt.Schlüssel(Objekt); (3) ["a", "b", "c"] Objekt.Werte(Objekt); (3) [1, 2, 3] ZusammenfassenDas ist alles, was ich zusammengestellt habe. Ich hoffe, Sie können auch anderen Artikeln auf 123WORDPRESS.COM Beachtung schenken! Das könnte Sie auch interessieren:
|
<<: Schritte zum Öffnen des MySQL-Binlogs
>>: Detaillierte Schritte zum Speichern von Emoji-Ausdrücken in MySQL
Vorwort mysqlslap ist ein Diagnoseprogramm, das d...
Das sogenannte dreispaltige adaptive Layout bedeu...
Bei unserer täglichen Arbeit führen wir manchmal ...
Inhaltsverzeichnis Linux-Umgebungsvariablen und P...
Was tun, wenn VmWare während der Installation von...
1. Erstellen Sie eine Datenbank 2. Erstellen Sie ...
Bei der Frontend-Entwicklung stehen wir in direkt...
Nehmen Sie nun an, dass Sie dem Formular ein Elem...
Ich bin heute auf ein sehr seltsames Problem gesto...
Ausgehend von diesem Artikel dient eine neue Arti...
Bei der Verwendung von MySQL zum Ausführen bestim...
Tatsächlich ist es sehr einfach, Axios in Vue zu ...
Inhaltsverzeichnis Problembeschreibung 1. Basislö...
In diesem Artikel wird der spezifische Code von V...
Inhaltsverzeichnis Vorwort Funktionale React-Komp...