Grundlegende JavaScript-Methoden, die jeder Anfänger kennen sollte

JavaScript ist wie das Schweizer Taschenmesser der Programmierung – es ist vielseitig, unverzichtbar und vollgepackt mit Tools, von denen Sie nicht wussten, dass Sie sie brauchen. Aber als Anfänger verheddert man sich schnell in Schleifen und wird von langem, sich wiederholendem Code überwältigt. Stellen Sie sich vor, Sie würden versuchen, manuell nach Elementen in einem unordentlichen Werkzeugkasten zu suchen – mühsam, oder?

Hier kommen JavaScript-Methoden ins Spiel. Mit diesen integrierten Tools können Sie Arrays bearbeiten, Daten filtern und komplexe Aufgaben problemlos vereinfachen. Betrachten Sie sie als Abkürzungen, die Ihnen Zeit und Mühe sparen und unordentlichen Code in etwas Sauberes und Effizientes verwandeln.

In diesem Artikel werden wir fünf wesentliche JavaScript-Methoden untersuchen: map(), filter(), Reduce(), forEach() und find(). Wenn Sie diese beherrschen, wird Ihr Code schärfer, schneller und es macht viel mehr Spaß, ihn zu schreiben.

„Beim Programmieren kommt es nicht darauf an, was man weiß; Es geht darum, was man herausfinden kann.“ – Chris Pine.

1. map() – Arrays transformieren

Was es tut:
Stellen Sie sich map() als einen persönlichen Assistenten vor, der eine To-Do-Liste erstellt, für jedes Element eine Aufgabe ausführt und Ihnen eine neue Liste mit den Ergebnissen aushändigt. Es eignet sich perfekt zum Transformieren von Daten, ohne das Original anzutasten.

Stellen Sie sich vor, Sie haben einen Stapel leerer T-Shirts und möchten alle mit Designs bedrucken. Anstatt den ursprünglichen Stapel zu ändern, erstellen Sie einen neuen Stapel mit den angewendeten Designs. So funktioniert map() – es wendet eine Funktion auf jedes Element an und gibt Ihnen ein neues Array.

Beispiel:
So können Sie mit map():
jede Zahl in einem Array verdoppeln

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Aufschlüsselung:

• Zahlen: Das ursprüngliche Array bleibt unberührt.
• num * 2: Die auf jedes Element angewendete Funktion.
• doubled: Das neue Array mit transformierten Werten.

Praktischer Anwendungsfall:
Angenommen, Sie haben eine Liste mit Produktpreisen in Dollar und möchten diese in eine andere Währung umrechnen. Mit map() können Sie die Konvertierung in einem Schritt durchführen.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Warum es nützlich ist:
map() hilft Ihnen, sich wiederholende Aufgaben zu vermeiden und Ihren Code sauber zu halten. Anstatt Schleifen zum Bearbeiten von Arrays zu verwenden, übernimmt diese Methode die schwere Arbeit für Sie.

Denken Sie immer daran, dass map() ein neues Array erstellt. Wenn Sie Daten vor Ort ändern möchten, ist dies nicht das richtige Tool für diese Aufgabe.

2. filter() – Auswahl bestimmter Elemente

Was es tut:
filter() erstellt ein neues Array, das nur die Elemente enthält, die eine bestimmte Bedingung erfüllen. Stellen Sie sich das wie einen Türsteher in einem Club vor, der nur diejenigen hereinlässt, die die Kriterien erfüllen.

Stellen Sie sich vor, Sie sortieren Ihren Kleiderschrank und behalten nur Kleidung, die perfekt zu Ihnen passt. filter() hilft Ihnen, genau das auszuwählen, was Sie brauchen, und den Rest wegzulassen – einfach und effizient.

Beispiel:
Lassen Sie uns gerade Zahlen aus einem Array herausfiltern:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Aufschlüsselung:

• Zahlen: Das ursprüngliche Array bleibt unberührt.
• Bedingung: num % 2 !== 0 prüft, ob eine Zahl ungerade ist.
• Ergebnis: Ein neues Array, oddNumbers, wird mit den gefilterten Werten erstellt.

Praktischer Anwendungsfall:
Angenommen, Sie verwalten eine Produktliste und möchten Artikel herausfiltern, die nicht vorrätig sind.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Wann man es verwendet:

• Extrahieren Sie nur relevante Daten aus einem Datensatz.
• Vereinfachen Sie Prozesse, indem Sie nur mit dem arbeiten, was Sie brauchen.

Warum Anfänger es lieben:
Im Gegensatz zu Schleifen ist filter() unkompliziert. Es verringert die Fehlerwahrscheinlichkeit und Sie können mit weniger Code mehr erreichen.

3. Reduce() – Daten aggregieren

Angenommen, Sie stehen an der Kasse eines Lebensmittelgeschäfts und die Kassiererin addiert die Preise aller Ihrer Artikel, um den Gesamtpreis zu ermitteln. Genau so funktioniert Reduce() – es kombiniert alle Elemente in einem Array zu einem einzigen Wert, etwa einer Summe, einem Produkt oder einem beliebigen benutzerdefinierten Ergebnis.

Was es tut:
redu() verarbeitet ein Array Element für Element und reduziert es basierend auf einer von Ihnen definierten Funktion auf einen einzelnen Ausgabewert.

Beispiel:
Berechnen wir die Gesamtsumme eines Arrays:

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

Aufschlüsselung:

• Akkumulator: Verfolgt die laufende Gesamtsumme (beginnt bei 0).
• currentValue: Bezieht sich auf das aktuelle Element im Array, das verarbeitet wird.
• Ergebnis: Kombiniert alle Zahlen zu einer einzigen Summe.

Praktischer Anwendungsfall:
Nehmen wir an, Sie erstellen einen Online-Warenkorb. Sie müssen die Gesamtkosten aller Artikel berechnen, die ein Benutzer ausgewählt hat.

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

Warum es etwas Besonderes ist:
Reduce() ist nicht nur für Zahlen gedacht – Sie können es verwenden, um:

• Strings kombinieren.
• Arrays reduzieren.
• Objekte dynamisch erstellen.

Eine lustige Wendung:
Lasst uns kreativ werden! Sie können Reduce() verwenden, um zu zählen, wie oft jeder Buchstabe in einem Wort vorkommt:

const numbers = [5, 10, 15, 20];
const total = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(total); // Output: 50

Warum Anfänger es lernen sollten:
Auch wenn sich Reduce() zunächst etwas fortgeschritten anfühlt, eröffnet die Beherrschung dieser Methode endlose Möglichkeiten zur Vereinfachung komplexer Vorgänge. Es ist wie das Schweizer Taschenmesser unter den Array-Methoden – vielseitig und leistungsstark.

„Lösen Sie zuerst das Problem. Dann schreiben Sie den Code.“ – John Johnson.
Mit Reduce() lösen Sie Probleme effizient mit elegantem, minimalem Code.

4. forEach() – Ein freundliches Arbeitstier für Arrays

Lasst uns die Bühne bereiten:
Stellen Sie sich vor, Sie wären ein Koch in einer Küche, der mehrere Gerichte zubereitet. Sie gehen jede Zutat auf Ihrer Liste durch und hacken, würfeln oder würzen nach Bedarf. Sie ändern nicht die Zutatenliste selbst – Sie führen lediglich eine Aktion für jeden Artikel aus. Genau das macht forEach().

Was es tut:
Mit forEach() können Sie ein Array durchlaufen und für jedes Element eine Funktion ausführen. Im Gegensatz zu map() oder filter() gibt es kein neues Array zurück – es führt lediglich Aktionen aus.

Beispiel:
Lassen Sie uns jede Frucht in einer Liste ausdrucken:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Was hier passiert:

• Eingabe: Das Fruchtarray.
• Aktion: Die Funktion protokolliert eine personalisierte Nachricht für jede Frucht.
• Ergebnis: Es wird kein neues Array erstellt – es führt nur die Aktion aus.

Praktischer Anwendungsfall:
Angenommen, Sie verwalten eine Liste mit Aufgaben und möchten diese als „erledigt“ protokollieren:

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Warum es sich von anderen Methoden unterscheidet:
Im Gegensatz zu map(), das ein neues Array erstellt, konzentriert sich forEach() ausschließlich auf Nebeneffekte – Aktionen, die kein direktes Ergebnis erzeugen, sondern etwas außerhalb des Arrays modifizieren oder mit ihm interagieren.

Zum Beispiel:

• API-Anfragen für jedes Element in einer Liste senden.
• Aktualisierung des DOM für eine Liste von Elementen.
• Werte in der Konsole protokollieren.

Wann man es verwendet:

• Verwenden Sie forEach(), wenn:
• Sie möchten nur über ein Array iterieren.
• Sie müssen Vorgänge ausführen, ohne dass ein neues Array erforderlich ist.

Worauf Anfänger achten sollten:
Da forEach() nichts zurückgibt, ist es nicht für die Verkettung von Operationen geeignet. Wenn Sie ein transformiertes Array benötigen, bleiben Sie bei map() oder filter().

Kreatives Beispiel:
Senden wir eine Dankes-E-Mail an jeden Kunden in einer Liste (nur simuliert):

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

Warum Anfänger es lieben:
forEach() ist einfach und intuitiv. Dies ist der erste Schritt, um zu lernen, wie man effektiv mit Arrays arbeitet.

Denken Sie daran: „Code-Einfachheit ist nicht die Abwesenheit von Komplexität – es ist die Kunst, sie zu beherrschen.“
forEach() ist Ihr erstes Tool zum einfachen Umgang mit Komplexität.

5. find() – Entdecken der ersten Übereinstimmung

Sie sind mit einer Karte auf Schatzsuche und der Hinweis lautet: „Finden Sie die erste Goldmünze im Wald.“ Du fängst an zu suchen, aber sobald du die erste Münze unter einem Baum glänzen siehst, hörst du auf. Sie haben gefunden, was Sie brauchen, und der Rest der Münzen spielt keine Rolle. Genau so funktioniert find() – es hilft Ihnen, das erste Element in einem Array zu finden, das Ihrer Bedingung entspricht, und kümmert sich nicht mehr darum.

Was es tut:
find() durchsucht ein Array und gibt das erste Element zurück, das die Bedingung in Ihrer Funktion erfüllt. Wenn keine Übereinstimmung gefunden wird, wird undefiniert zurückgegeben.

Codebeispiel:
Suchen wir die erste Zahl größer als 20:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Was passiert:

• Die Bedingungsnum > 20 wird für jedes Element überprüft.
• Sobald 25 die Bedingung erfüllt, stoppt die Suche und 25 wird zurückgegeben.
• Nach der ersten Übereinstimmung werden keine weiteren Elemente überprüft.

Stellen Sie sich find() wie eine Schnitzeljagd vor, bei der Ihnen gesagt wird: „Finde die erste rote Blume.“ Sie sammeln nicht jede rote Blume (das würde filter() tun). Stattdessen bleiben Sie stehen, sobald Sie eines sehen, und rufen: „Verstanden!“

Praktischer Anwendungsfall:
Angenommen, Sie verwalten eine Kontaktliste und möchten die erste Person mit einer bestimmten E-Mail-Adresse finden.

const pricesInUSD = [10, 20, 30];
const pricesInEUR = pricesInUSD.map(price => price * 0.85);
console.log(pricesInEUR); // Output: [8.5, 17, 25.5]

Warum Anfänger es lieben:
find() ist einfach zu verwenden und spart Zeit, wenn Sie nur ein Ergebnis benötigen. Es ist, als würde man mit einer Taschenlampe nach einem einzelnen Objekt in einem dunklen Raum suchen – es wird nicht versucht, den gesamten Raum zu erhellen.

Kreatives Beispiel:
Lassen Sie uns dies in die Welt des E-Commerce bringen. Angenommen, Sie haben eine Produktliste und möchten das erste Produkt finden, das im Angebot ist.

const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // Output: [1, 3, 5]

Umgang mit Randfällen:
Was passiert, wenn kein Artikel Ihrem Zustand entspricht? Keine Sorge – find() wird undefiniert zurückgeben. Mit einem Fallback können Sie dies elegant handhaben:

const products = [
  { name: 'Laptop', inStock: true },
  { name: 'Phone', inStock: false },
  { name: 'Tablet', inStock: true }
];

const availableProducts = products.filter(product => product.inStock);
console.log(availableProducts);
// Output: [{ name: 'Laptop', inStock: true }, { name: 'Tablet', inStock: true }]

Warum find() mächtig ist:

• Effizienz: Stoppt, sobald die erste Übereinstimmung gefunden wird.
• Klarheit: Macht Ihre Absicht im Code deutlich – die Suche nach einem einzelnen Element.
• Verwendung in der realen Welt: Perfekt zum Auffinden eines einzelnen Benutzers, Produkts oder Datenpunkts in großen Datensätzen.

Abschluss

JavaScript ist ein leistungsstarkes Werkzeug und diese fünf Methoden – map(), filter(), Reduce(), forEach() und find() – sind der Schlüssel, um sein wahres Potenzial auszuschöpfen. Sie helfen Ihnen, saubereren und effizienteren Code zu schreiben und ersparen Ihnen gleichzeitig Endlosschleifen und redundante Aufgaben. Betrachten Sie sie als das Schweizer Taschenmesser in Ihrem Entwickler-Werkzeugkasten: vielseitig, zuverlässig und darauf ausgelegt, Ihnen das Leben zu erleichtern.

Um diese Methoden zu beherrschen, geht es nicht nur darum, die Syntax zu lernen – es geht darum, wie ein Programmierer zu denken. Ganz gleich, ob Sie Daten mit „map()“ transformieren, das Rauschen mit „filter()“ herausfiltern, alles mit „reduc()“ zusammenfassen, nahtlos mit „forEach()“ iterieren oder mit „find()“ das versteckte Juwel finden – Sie bauen Fähigkeiten, die Ihren Code professioneller und wirkungsvoller machen.

Denken Sie daran, dass die Magie des Codierens nicht darin besteht, lange, komplexe Programme zu schreiben, sondern darin, elegante Lösungen für alltägliche Probleme zu finden. Fangen Sie klein an: Wählen Sie eine Methode aus, experimentieren Sie damit und probieren Sie sie in Ihrem nächsten Projekt aus. Je mehr Sie üben, desto mehr werden Ihnen diese Methoden zur zweiten Natur.

„Der beste Code ist der, den man nicht erklären muss.“ – Martin Fowler
Verwenden Sie diese Methoden, um Code zu schreiben, der für sich selbst spricht.

Teilen Sie mir Ihre Gedanken in den Kommentaren mit! Haben Sie diese Methoden in Ihren Projekten eingesetzt? Ich würde gerne Ihre Erfahrungen hören.

Dieser Artikel wurde ursprünglich auf Hashnode veröffentlicht

Das obige ist der detaillierte Inhalt vonGrundlegende JavaScript-Methoden, die jeder Anfänger kennen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!