A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach below:

Array.prototype.forEach() - JavaScript | MDN

Array.prototype.forEach()

Baseline Widely available

Die forEach() Methode von Array Instanzen führt eine bereitgestellte Funktion einmal für jedes Arrays-Element aus.

Probieren Sie es aus
const array1 = ["a", "b", "c"];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
Syntax
forEach(callbackFn)
forEach(callbackFn, thisArg)
Parameter
callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Ihr Rückgabewert wird verworfen. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

Der Index des aktuellen Elements, das im Array verarbeitet wird.

array

Das Array, auf dem forEach() aufgerufen wurde.

thisArg Optional

Ein Wert, der als this verwendet wird, wenn callbackFn ausgeführt wird. Siehe iterative Methoden.

Rückgabewert

Keiner (undefined).

Beschreibung

Die forEach() Methode ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn Funktion einmal für jedes Element in einem Array in aufsteigender Indexreihenfolge auf. Im Gegensatz zu map() gibt forEach() immer undefined zurück und ist nicht verkettbar. Der typische Anwendungsfall ist die Ausführung von Nebenwirkungen am Ende einer Verkettung. Lesen Sie den Abschnitt über iterative Methoden für weitere Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Es wird nicht für leere Plätze in lückigen Arrays aufgerufen.

Die forEach() Methode ist generisch. Sie erwartet nur, dass der this-Wert eine length Eigenschaft und integer-indizierte Eigenschaften hat.

Es gibt keine Möglichkeit, eine forEach() Schleife zu stoppen oder zu unterbrechen, außer durch das Auslösen einer Ausnahme. Wenn Sie solches Verhalten benötigen, ist die forEach() Methode das falsche Werkzeug.

Eine frühzeitige Beendigung kann mit Schleifenanweisungen wie for, for...of und for...in erreicht werden. Array-Methoden wie every(), some(), find() und findIndex() stoppen die Iteration ebenfalls sofort, wenn keine weitere Iteration erforderlich ist.

forEach() erwartet eine synchrone Funktion — es wartet nicht auf Promises. Stellen Sie sicher, dass Sie sich über die Implikationen im Klaren sind, wenn Sie Promises (oder asynchrone Funktionen) als forEach Rückrufe verwenden.

const ratings = [5, 4, 5];
let sum = 0;

const sumFunction = async (a, b) => a + b;

ratings.forEach(async (rating) => {
  sum = await sumFunction(sum, rating);
});

console.log(sum);
// Naively expected output: 14
// Actual output: 0

Um eine Reihe von asynchronen Operationen nacheinander oder gleichzeitig auszuführen, siehe Versprechen-Komposition.

Beispiele Eine for-Schleife in forEach umwandeln
const items = ["item1", "item2", "item3"];
const copyItems = [];

// before
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}

// after
items.forEach((item) => {
  copyItems.push(item);
});
Den Inhalt eines Arrays ausgeben

Hinweis: Um den Inhalt eines Arrays in der Konsole anzuzeigen, können Sie console.table() verwenden, welches eine formatierte Version des Arrays ausgibt.

Das folgende Beispiel zeigt einen alternativen Ansatz unter Verwendung von forEach().

Der folgende Code protokolliert eine Zeile für jedes Element in einem Array:

const logArrayElements = (element, index /*, array */) => {
  console.log(`a[${index}] = ${element}`);
};

// Notice that index 2 is skipped, since there is no item at
// that position in the array.
[2, 5, , 9].forEach(logArrayElements);
// Logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9
Verwendung von thisArg

Das folgende (konstruiert) Beispiel aktualisiert die Eigenschaften eines Objekts anhand jedes Eintrags im Array:

class Counter {
  constructor() {
    this.sum = 0;
    this.count = 0;
  }
  add(array) {
    // Only function expressions have their own this bindings.
    array.forEach(function countEntry(entry) {
      this.sum += entry;
      ++this.count;
    }, this);
  }
}

const obj = new Counter();
obj.add([2, 5, 9]);
console.log(obj.count); // 3
console.log(obj.sum); // 16

Da der thisArg Parameter (this) zu forEach() übergeben wird, wird es jedes Mal an callback übergeben, wenn es aufgerufen wird. Der Rückruf verwendet es als seinen this Wert.

Hinweis: Wenn die Rückruffunktion eine Arrow-Funktion verwendet, könnte der thisArg Parameter weggelassen werden, da alle Arrow-Funktionen den this Wert lexikalisch binden.

Eine Objektkopierfunktion

Der folgende Code erstellt eine Kopie eines gegebenen Objekts.

Es gibt verschiedene Möglichkeiten, eine Kopie eines Objekts zu erstellen. Das Folgende ist nur eine Möglichkeit und wird präsentiert, um zu erklären, wie Array.prototype.forEach() funktioniert, indem Object.* Dienstprogramme verwendet werden.

const copy = (obj) => {
  const copy = Object.create(Object.getPrototypeOf(obj));
  const propNames = Object.getOwnPropertyNames(obj);
  propNames.forEach((name) => {
    const desc = Object.getOwnPropertyDescriptor(obj, name);
    Object.defineProperty(copy, name, desc);
  });
  return copy;
};

const obj1 = { a: 1, b: 2 };
const obj2 = copy(obj1); // obj2 looks like obj1 now
Ein Array abflachen

Das folgende Beispiel dient nur zu Lernzwecken. Wenn Sie ein Array mit eingebauten Methoden abflachen möchten, können Sie Array.prototype.flat() verwenden.

const flatten = (arr) => {
  const result = [];
  arr.forEach((item) => {
    if (Array.isArray(item)) {
      result.push(...flatten(item));
    } else {
      result.push(item);
    }
  });
  return result;
};

// Usage
const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
Verwendung des dritten Arguments von callbackFn

Das array Argument ist nützlich, wenn Sie auf ein anderes Element im Array zugreifen möchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerst filter(), um die positiven Werte zu extrahieren und verwendet dann forEach(), um dessen Nachbarn zu protokollieren.

const numbers = [3, -1, 1, 4, 1, 5];
numbers
  .filter((num) => num > 0)
  .forEach((num, idx, arr) => {
    // Without the arr argument, there's no way to easily access the
    // intermediate array without saving it to a variable.
    console.log(arr[idx - 1], num, arr[idx + 1]);
  });
// undefined 3 1
// 3 1 4
// 1 4 1
// 4 1 5
// 1 5 undefined
Verwendung von forEach() auf lückigen Arrays
const arraySparse = [1, 3, /* empty */, 7];
let numCallbackRuns = 0;

arraySparse.forEach((element) => {
  console.log({ element });
  numCallbackRuns++;
});

console.log({ numCallbackRuns });

// { element: 1 }
// { element: 3 }
// { element: 7 }
// { numCallbackRuns: 3 }

Die Rückruffunktion wird nicht für den fehlenden Wert an Index 2 aufgerufen.

Aufrufen von forEach() auf Nicht-Array-Objekten

Die forEach() Methode liest die length Eigenschaft dieses Objekts und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nichtnegative ganze Zahl kleiner als length ist.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 5, // ignored by forEach() since length is 3
};
Array.prototype.forEach.call(arrayLike, (x) => console.log(x));
// 2
// 3
// 4
Spezifikationen Browser-Kompatibilität Siehe auch

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4