Tipps zur Kurzschrift in JavaScript

1. Arrays zusammenführen

Normale Schrift :

Normalerweise verwenden wir die Methode concat() in Array, um zwei Arrays zusammenzuführen. Die Methode concat() wird verwendet, um zwei oder mehr Arrays zusammenzuführen. Sie verändert die bestehenden Arrays nicht, sondern gibt ein neues Array zurück. Schauen wir uns ein einfaches Beispiel an:

lass Äpfel = ['🍎', '🍏'];
let Früchte = ['🍉', '🍊', '🍇'].concat(Äpfel);

console.log( Früchte );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

Kurzschriftmethode :

Wir können den Code reduzieren, indem wir den ES6-Spread-Operator (...) wie folgt verwenden:

lass Äpfel = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇', ...Äpfel]; // <-- hier

console.log( Früchte );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

Die erhaltene Ausgabe ist die gleiche wie bei der normalen Schreibmethode.

2. Arrays zusammenführen (am Anfang)

Normale Schrift :

Angenommen, wir möchten alle Elemente im Apple-Array am Anfang des Fruits-Arrays hinzufügen und nicht am Ende wie im vorherigen Beispiel. Wir können

lass Äpfel = ['🍎', '🍏'];
lass Früchte = ['🥭', '🍌', '🍒'];

// Füge zu Beginn alle Elemente von Äpfeln zu Früchten hinzu
Array.prototype.unshift.apply(Obst, Äpfel)

console.log( Früchte );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

Jetzt werden rote und grüne Äpfel am Anfang statt am Ende zusammengeführt.

Kurzschriftmethode :

Wir können diesen langen Code mit dem ES6-Spread-Operator (...) noch wie folgt verkürzen:

lass Äpfel = ['🍎', '🍏'];
let fruits = [...apples, '🥭', '🍌', '🍒']; // <-- hier

console.log( Früchte );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

3. Ein Array klonen

Normale Schrift :

Wir können ein Array ganz einfach mit der Methode slice() in Array wie folgt klonen:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];
Lassen Sie cloneFruits = fruits.slice();

Konsole.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

Kurzschriftmethode :

Wir können den ES6-Spread-Operator (...) verwenden, um ein Array wie folgt zu klonen:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = [...Früchte]; // <-- hier

Konsole.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

4. Destrukturierungsauftrag

Normale Schrift :

Beim Arbeiten mit Arrays müssen wir ein Array manchmal in eine Reihe von Variablen „entpacken“, etwa so:

lass Äpfel = ['🍎', '🍏'];
sei redApple = Äpfel[0];
sei greenApple = Äpfel[1];

console.log( roter Apfel ); //=> 🍎
console.log( grüner Apfel ); //=> 🍏

Kurzschriftmethode :

Mit einer Destrukturierungszuweisung können wir in einer Codezeile dasselbe Ergebnis erzielen:

lass Äpfel = ['🍎', '🍏'];
let [roterApfel, grünerApfel] = Äpfel; // <-- hier

console.log( roter Apfel ); //=> 🍎
console.log( grüner Apfel ); //=> 🍏

5. Vorlagenliterale

Normale Schrift :

Wenn wir einem String einen Ausdruck hinzufügen müssen, gehen wir normalerweise folgendermaßen vor:

// Anzeigename zwischen zwei Strings
lass name = "Palash";
console.log('Hallo, ' + name + '!');
//=> Hallo, Palash!

// Zwei Zahlen addieren und subtrahieren
sei num1 = 20;
sei num2 = 10;
console.log('Summe = ' + (num1 + num2) + ' und Subtraktion = ' + (num1 - num2));
//=> Summe = 30 und Subtraktion = 10

Kurzschriftmethode :

Mit Vorlagenliteralen können wir Backticks () verwenden, sodass wir Ausdrücke in „${...}“ einschließen und sie dann in Zeichenfolgen einbetten können, wie folgt:

// Anzeigename zwischen zwei Strings
lass name = "Palash";
console.log(`Hallo, ${name}!`); // <-- + var + muss nicht mehr verwendet werden
//=> Hallo, Palash!

// Zwei Zahlen addieren
sei num1 = 20;
sei num2 = 10;
console.log(`Summe = ${num1 + num2} und Subtraktion = ${num1 - num2}`);
//=> Summe = 30 und Subtraktion = 10

6. For-Schleife

Normale Schrift :

Wir können eine For-Schleife verwenden, um ein Array wie folgt zu durchlaufen:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];

// Durchlaufe jede Frucht
für (let index = 0; index < Früchte.Länge; index++) { 
  console.log( Früchte[index] ); // <-- Holen Sie sich die Frucht am aktuellen Index
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Kurzschriftmethode :

Wir können dasselbe Ergebnis mit viel weniger Code erreichen, indem wir eine for...of-Anweisung wie folgt verwenden:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];

// Verwenden der for...of-Anweisung 
für (lass Frucht der Früchte) {
  konsole.log( Obst );
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

7. Pfeilfunktionen

Normale Schrift :

Um über ein Array zu iterieren, können wir auch die Methode forEach() in Array verwenden. Allerdings muss dafür viel Code geschrieben werden, weniger als für die gängigste for-Schleife, aber immer noch etwas mehr als für die for...of-Anweisung:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];

// Verwenden der forEach-Methode
Früchte.fürJedes(Funktion(Frucht){
  konsole.log( Obst );
});

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Kurzschriftmethode :

Die Verwendung von Pfeilfunktionsausdrücken ermöglicht es uns jedoch, den gesamten Schleifencode in einer Zeile zu schreiben, etwa so:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];
Früchte.fürEach(Obst => console.log(Obst)); // <- Magie ✨

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Meistens verwende ich die forEach-Schleife mit einer Pfeilfunktion. Hier zeige ich sowohl die for...of-Anweisung als auch die forEach-Schleife, damit Sie den Code nach Ihren Wünschen verwenden können.

8. Ein Objekt in einem Array finden

Normale Schrift :

Um ein Objekt aus einem Array von Objekten anhand einer seiner Eigenschaften zu finden, verwenden wir normalerweise eine For-Schleife:

lass Inventar = [
  {name: 'Bananen', Menge: 5},
  {Name: 'Äpfel', Menge: 10},
  {Name: 'Trauben', Menge: 2}
];

// Holen Sie sich das Objekt mit dem Namen „Apples“ innerhalb des Arrays
Funktion getApples(arr, Wert) {
  für (let index = 0; index < arr.length; index++) {

    // Überprüfen Sie, ob der Wert dieser Objekteigenschaft „Name“ mit „Apples“ identisch ist.
    wenn (arr[index].name === 'Äpfel') { //=> 🍎

      // Es wurde eine Übereinstimmung gefunden. Gib dieses Objekt zurück.
      gibt arr[index] zurück;
    }
  }
}

lass Ergebnis = getApples(Inventar);
console.log( Ergebnis )
//=> { Name: "Äpfel", Menge: 10 }

Kurzschriftmethode :

Wow! Wir haben oben so viel Code geschrieben, um diese Logik zu implementieren. Aber die Verwendung der find()-Methode in Array und der Pfeilfunktion => ermöglicht es uns, dies in einer Zeile wie folgt zu tun:

// Holen Sie sich das Objekt mit dem Namen „Apples“ innerhalb des Arrays
Funktion getApples(arr, Wert) {
  return arr.find(obj => obj.name === 'Äpfel'); // <-- hier
}

lass Ergebnis = getApples(Inventar);
console.log( Ergebnis )
//=> { Name: "Äpfel", Menge: 10 }

9. Konvertieren Sie eine Zeichenfolge in eine Ganzzahl

Normale Schrift :

lass num = parseInt("10")

console.log( Zahl ) //=> 10
console.log(Typ von num) //=> "Zahl"

Kurzschriftmethode :

Wir können das gleiche Ergebnis erzielen, indem wir der Zeichenfolge wie folgt das Präfix + voranstellen:

lass num = +"10";

console.log( Zahl ) //=> 10
console.log(Typ von num) //=> "Zahl"
console.log( +"10" === 10 ) //=> wahr

10. Kurzschlussauswertung

Normale Schrift :

Wenn wir einen Wert so einstellen müssen, dass er abhängig von einem anderen Wert nicht falsch ist, verwenden wir normalerweise eine if-else-Anweisung wie diese:

Funktion getUserRole(Rolle) {
  lass Benutzerrolle;

  // Wenn die Rolle kein falscher Wert ist
  // setze `userRole` als übergebenen `role`-Wert
  wenn (Rolle) {
    Benutzerrolle = Rolle;
  } anders {

    // andernfalls setze die `userRole` als USER
    Benutzerrolle = "BENUTZER";
  }

  Benutzerrolle zurückgeben;
}

console.log( getUserRole() ) //=> "BENUTZER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"

Kurzschriftmethode :

Aber mithilfe der Kurzschlussauswertung (||) können wir dies in einer Codezeile tun, und zwar wie folgt:

Funktion getUserRole(Rolle) {
  returniere Rolle || 'USER'; // <-- hier
}

console.log( getUserRole() ) //=> "BENUTZER"
console.log( getUserRole('ADMIN') ) //=> "ADMIN"

Grundsätzlich wird Ausdruck1 || Ausdruck2 als wahrer Ausdruck ausgewertet. Dies bedeutet, dass Sie sich nicht mit der Auswertung des restlichen Ausdrucks befassen müssen, wenn der erste Teil wahr ist.

Einige zusätzliche Punkte

Pfeilfunktionen

Wenn Sie diesen Kontext nicht benötigen, kann der Code durch die Verwendung von Pfeilfunktionen sogar noch kürzer sein:

lass Früchte = ['🍉', '🍊', '🍇', '🍎'];
Früchte.fürJeden(Konsole.log);

Suchen eines Objekts in einem Array

Sie können Objektdestrukturierung und Pfeilfunktionen verwenden, um den Code übersichtlicher zu gestalten:

// Holen Sie sich das Objekt mit dem Namen „Apples“ innerhalb des Arrays
const getApples = array => array.find(({ name }) => name === "Äpfel");

lass Ergebnis = getApples(Inventar);
console.log(Ergebnis);
//=> { Name: "Äpfel", Menge: 10 }

Alternativen zur Kurzschlussauswertung

const getUserRole1 = (Rolle = "BENUTZER") => Rolle;
const getUserRole2 = Rolle => Rolle ?? "BENUTZER";
const getUserRole3 = Rolle => Rolle? Rolle: "BENUTZER";

Abschließend möchte ich mit einem Zitat schließen:

Der Grund, warum Code unser Feind ist, liegt darin, dass viele von uns Programmierern eine Menge schlechten Code schreiben. Wenn wir damit nicht durchkommen, ist es das Beste, unser Bestes zu tun, um den Code einfach zu halten.

Wenn Sie das Programmieren lieben – und zwar wirklich, wirklich lieben –, dann werden Sie das Programmieren umso mehr lieben, je weniger Sie es tun.

Dies ist das Ende dieses Artikels über JavaScript-Abkürzungskenntnisse. Weitere relevante Inhalte zu JavaScript-Abkürzungen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!