JavaScript-Array-Methoden: „forEach', „map', „filter' und „reduce'.

JavaScript-Array-Methoden: forEach, Map, Filter und Reduce

JavaScript bietet mehrere leistungsstarke Methoden zum Arbeiten mit Arrays. Diese Methoden – forEach, Map, Filter und Reduce – können Ihren Code effizienter und leichter lesbar machen. Lassen Sie uns diese Methoden anhand einfacher Analogien und Beispiele untersuchen.

für jede

Analogie: Mit jedem Spielzeug in der Schachtel spielen

Stellen Sie sich vor, Sie haben eine Kiste mit Spielzeugen und möchten mit jedem Spielzeug einzeln spielen. Du nimmst jedes Spielzeug aus der Schachtel, spielst damit und legst es dann zurück.

Beispiel:

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

Erklärung:
Du schaust dir jedes Spielzeug in der Schachtel an und spielst damit.

Karte

Analogie: Jedes Spielzeug in etwas Neues verwandeln

Angenommen, Sie haben eine Schachtel Spielzeug und möchten jedes Spielzeug in etwas anderes verwandeln. Du verwandelst zum Beispiel jedes Auto in einen Rennwagen, jede Puppe in einen Superhelden und jeden Ball in einen Basketball.

Beispiel:

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

Erklärung:
Sie verwandeln jedes Spielzeug in eine neue Version und legen die neuen Spielzeuge in eine neue Schachtel.

Filter

Analogie: Nur bestimmte Spielzeuge zum Spielen auswählen

Du hast eine Schachtel Spielzeug, aber heute willst du nur mit den roten Spielzeugen spielen. Also schaust du durch die Schachtel und nimmst nur die roten Spielzeuge heraus.

Beispiel:

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

Erklärung:
Sie wählen nur die Spielzeuge aus, die einer bestimmten Bedingung entsprechen (in diesem Fall rot).

reduzieren

Analogie: Alle Spielzeuge zu einem Mega-Spielzeug kombinieren

Stellen Sie sich vor, Sie möchten ein großes Spielzeug erschaffen, indem Sie alle Spielzeuge miteinander kombinieren. Du nimmst jedes Spielzeug und fügst es einzeln zum Megaspielzeug hinzu.

Beispiel:

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Erklärung:
Du beginnst mit einem leeren Mega-Spielzeug und fügst jedes Spielzeug hinzu, bis du ein großes Spielzeug hast.

Alles zusammenfügen

Angenommen, Sie haben eine Schachtel mit verschiedenen Spielzeugen und möchten:

1. Schauen Sie sich jedes Spielzeug an und sehen Sie, was es ist (für jedes).
2. Verwandeln Sie jedes Spielzeug in eine neue Version (Karte).
3. Wählen Sie nur die Spielzeuge aus, die blau sind (Filter).
4. Alle ausgewählten Spielzeuge zu einem Megaspielzeug kombinieren (reduzieren).

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Erklärung:

1. Schauen Sie sich jedes Spielzeug an.
2. Ändern Sie jedes Spielzeug durch eine neue Version.
3. Wählen Sie nur die blauen Spielzeuge.
4. Kombinieren Sie sie zu einem großen Spielzeug.

Erweiterte Optionen und Techniken

für jede

• Ausbruch aus forEach: Sie können nicht aus einer forEach-Schleife ausbrechen. Wenn Sie diese Funktionalität benötigen, sollten Sie die Verwendung einer for-Schleife oder for...of.
in Betracht ziehen
• Verwendung von thisArg: Sie können ein thisArg bereitstellen, das als this im Rückruf verwendet werden soll.

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

Karte

• Mit thisArg: Ähnlich wie bei forEach können Sie ein thisArg bereitstellen, das als this im Rückruf verwendet wird.

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• Verschiedene Typen zurückgeben: Map kann ein Array eines anderen Typs zurückgeben.

  let toyLengths = toys.map(toy => toy.length);

Filter

• Komplexe Bedingungen: Verwenden Sie komplexe Bedingungen zum Filtern.

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

reduzieren

• Anfangswert: Geben Sie immer einen Anfangswert an, um unerwartete Ergebnisse zu vermeiden.

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• Auf Objekt reduzieren: Mit Reduzieren können Sie Objekte erstellen.

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

Wenn Sie diese Methoden und ihre erweiterten Optionen verstehen, können Sie effizienteren und lesbareren JavaScript-Code schreiben. Viel Spaß beim Codieren!

以上是JavaScript-Array-Methoden: „forEach', „map', „filter' und „reduce'.的详细内容。更多信息请关注PHP中文网其他相关文章！