3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen

Vorwort:

Bei Angular oder React-Projekten führt das Anblick von altmodischem JavaScript Code bei code review häufig dazu, dass der Entwickler als Anfänger eingestuft wird. Aber wenn Sie die folgenden 3 Tipps kennen, gelten Sie als der Yoda des modernen JavaScript. Also, lasst uns unsere Reise beginnen!

1. Der magische Erweiterungsoperator

Der spread Operator, drei Punkte ( ... ), ist wohl mein Lieblingsoperator in JavaScript. Ich verwende es hauptsächlich in den folgenden 3 Situationen:

1. Array kopieren

const arr = [1, 2, 3, 4]
const newArr = [...arr]

console.log(newArr) // [1, 2, 3, 4]

2. Arrays zusammenführen

Konstante NummerArr = [1, 2, 3, 4]
const alphaArr = ['a', 'b', 'c']
const newArr = [...numArr, ...alphaArr]

console.log(newArr) // [1, 2, 3, 4, 'a', 'b', 'c']

3. Erweitern Sie das Objekt

const Rechteck = { Breite: 10, Höhe: 10 }
const cube = { ...Rechteck, Länge: 7 }

console.log(Würfel) // {Breite: 10, Höhe: 10, Länge: 7}

2. Beste Möglichkeit, Nullprüfungen durchzuführen

Erinnern Sie sich an den ersten Nullprüfcode, den Sie geschrieben haben? Als JavaScript noch nicht so weit fortgeschritten war wie heute, habe ich in meinen alten Code Folgendes geschrieben:

wenn (foo !== null && foo !== undefiniert) { }

Später wurde mir durch ein einfaches „Wenn“ das Leben gerettet!

wenn (foo) {}

Solange der Bedingungswert foo nicht einer der folgenden Werte ist, ist er wahr.

• Null
• undefiniert
• NaN
• Leere Zeichenfolge ("")
• FALSCH
  

Zusätzlich zum einfachen if können der optionale Verkettungsoperator und der Null-Koaleszenzoperator des modernen JavaScript unseren Code prägnanter machen.

1. Optionaler Verkettungsoperator

Der optionale Verkettungsoperator ist eine sichere Möglichkeit, auf Eigenschaften verschachtelter Objekte zuzugreifen. Dies bedeutet, dass wir beim Zugriff auf eine lange Liste von Objekteigenschaften nicht mehrere Nullprüfungen durchführen müssen. Der optionale Verkettungsoperator macht Ausdrücke kürzer und prägnanter, wenn versucht wird, auf möglicherweise nicht vorhandene Objekteigenschaften zuzugreifen.

Das folgende Beispiel prüft, ob die Postleitzahl der Adresse eines Kunden Null ist:

const-Client = {
  Name: 'Liu Xing',
  Adresse:
    Postleitzahl: '1234'
  }
}

// Alte Wertmethode if (client && client.address && client.address.zipcode) {}
// Ein modernerer Ansatz zur optionalen Verkettung if (client?.address?.zipcode) {}

2. Null-Koaleszenzoperator

Der Null-Koaleszenzoperator ( ?? ) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null oder undefined ist, andernfalls gibt er seinen linken Operanden zurück.

const defaultMessage = "Hallo, das Zen von JavaScript"
const msg = defaultMessage ?? „Hallo Liu Xing“;
console.log(msg); // Hallo, das Zen von JavaScript'

Wenn defaultMessage null oder undefined ist, wird Hello Liu Xing gedruckt.

Die Wirkung wird noch größer, wenn wir es der Reihe nach verwenden:

console.log(Vorname ?? Nachname ?? 'anonymous')

In diesem Beispiel wird „firstName“ angezeigt, wenn firstName “ nicht null/undefined ist, andernfalls, wenn lastName nicht null/undefined ist, wird „lastName“ angezeigt. Wenn sie alle null/undefined sind, wird „ anonymous “ angezeigt.

3. Verwenden von .map(), .reduce() und .filter()

Lassen Sie uns als Nächstes über die leistungsstarken Techniken der funktionalen und reaktiven Programmierung sprechen! Als ich es vor ein paar Jahren zum ersten Mal benutzte, öffnete es mir wirklich neue Türen. Jedes Mal, wenn ich diesen prägnanten Code sehe, bin ich noch immer von seiner Schönheit beeindruckt.

Heute werde ich Beispiele für die drei am häufigsten verwendeten Methoden geben: Map, Reduce und Filter.

Vor COVID machten wir Urlaub in Paris. Also gingen sie in den Supermarkt und kauften ein paar Sachen. Sie kauften Lebensmittel und Dinge des täglichen Bedarfs. Aber alle Artikel sind in Euro angegeben und sie möchten den Preis jedes Artikels und die Gesamtkosten ihrer Lebensmittel in RMB wissen.

Dabei entspricht 1 Euro 7,18 japanischen Yen.

Auf herkömmliche Weise würden wir dies mithilfe einer klassischen Schleife tun:

Konstante Elemente = [
  {
    Name: 'Ananas',
    Preis: 2,
    Typ: „Essen“
  },
  {
    Name: "Rindfleisch",
    Preis: 20,
    Typ: „Essen“
  },
  {
    Name: 'Anwalt',
    Preis: 1,
    Typ: „Essen“
  },
  {
    Name: 'Shampoo',
    Preis: 5,
    Typ: „anderes“
  }
]

sei Summe = 0
const itemsInYuan = []

für (lass i = 0; i < Elemente.Länge; i++) {
  const Artikel = Artikel[i]
  Artikelpreis *= 7,18
  itemsInYuan.push(Artikel)
  wenn (Artikeltyp === 'Lebensmittel') {
    Summe += Artikelpreis
  }
}

console.log(Elemente im Verzeichnis)
/*
[
  { Name: 'Ananas', Preis: 14,36, Typ: 'Lebensmittel' },
  { Name: 'Rindfleisch', Preis: 143,6, Typ: 'Lebensmittel' },
  { Name: 'Befürworter', Preis: 7,18, Typ: 'Lebensmittel' },
  { Name: 'Shampoo', Preis: 35,9, Typ: 'Sonstiges' }
]
*/
console.log(Summe) // 165.14
Verwenden wir nun die von JavaScript bereitgestellte Methode der funktionalen Programmierung, um diese Berechnung zu implementieren.

const itemsInYuan = items.map(item => {
  const itemInYuan = { ...item }
  ArtikelInYuan.Preis *= 7,18
  Artikel zurückgebenInYuan
})

const Summe = itemsInYuan.filter(Artikel => Artikel.Typ === 'Lebensmittel').reduce((Gesamt, Artikel) => Gesamt + Artikel.Preis, 0)

Das obige Beispiel verwendet die Map-Methode, um Euro in Yen umzurechnen, verwendet Filter, um Non-Food-Artikel herauszufiltern, und verwendet Reduce, um die Summe der Preise zu berechnen.

Damit ist dieser Artikel über 3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen, abgeschlossen. Weitere relevante JavaScript-Tipps finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!