20 JavaScript-Tipps zur Verbesserung der Entwicklungseffizienz

20 JavaScript-Tipps zur Verbesserung der Entwicklungseffizienz

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:

  • Reduzieren Sie die Anzahl der LOC (Lines of Code)
  • Programmierwettbewerb
  • Hackathon
  • Oder andere zeitlich begrenzte Aufgaben

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 initialisieren

Sie 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 durch

Verwenden 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?
Fähigkeit zum Sortieren von Zahlen und Objekten, sowohl in aufsteigender als auch in absteigender Reihenfolge.

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 Bedingungen

Wenn 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 Werte

Mö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 Karte

Hä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 cool

Sie 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ühren

In 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. Pfeilfunktionen

Pfeilfunktionsausdrü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 Verkettung

Wenn 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 Array

Verwenden 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-Koaleszenzoperator

Der 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-Betreiber

Diese 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. Standardparameter

const 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 Hexadezimalzahlen

Zur 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 vertauschen

sei a = 5;
sei b = 8;
[ein,b] = [b,ein]
[ein,b]
// Ausgabe
(2) [8, 5]

19. Einzeilige Palindromprüfung

Funktion checkPalindrome(str) {
  : return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Ausgabe: true

20. Konvertieren Sie die Eigenschaften eines Objekts in die Eigenschaften eines Arrays

Verwenden 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]

Zusammenfassen

Das 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:
  • Praktische AngularJS-Entwicklungsfähigkeiten (empfohlen)
  • Teilen Sie klassische JavaScript-Entwicklungskenntnisse
  • Einführung in die Verwendung von javascript:; und javascript:void(0)
  • Detaillierte Erklärung von „&“ und „|“ in Javascript

<<:  Schritte zum Öffnen des MySQL-Binlogs

>>:  Detaillierte Schritte zum Speichern von Emoji-Ausdrücken in MySQL

Artikel empfehlen

Detaillierte Erklärung von MySQL Explain

Bei unserer täglichen Arbeit führen wir manchmal ...

Einführung in Linux-Umgebungsvariablen und Prozessadressraum

Inhaltsverzeichnis Linux-Umgebungsvariablen und P...

Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs

Bei der Frontend-Entwicklung stehen wir in direkt...

Tutorial zu HTML-Formular-Tags (4):

Nehmen Sie nun an, dass Sie dem Formular ein Elem...

Unvollständige Lösung für die Verwendung von Eingabetyp=Textwert=str

Ich bin heute auf ein sehr seltsames Problem gesto...

So kapseln Sie Axios-Anfragen mit Vue

Tatsächlich ist es sehr einfach, Axios in Vue zu ...

Mehrere Möglichkeiten zum Festlegen der Ablaufzeit von localStorage

Inhaltsverzeichnis Problembeschreibung 1. Basislö...

Vue implementiert horizontal abgeschrägtes Balkendiagramm

In diesem Artikel wird der spezifische Code von V...

Ein umfassendes Verständnis der funktionalen Komponenten von Vue.js

Inhaltsverzeichnis Vorwort Funktionale React-Komp...