wake-up-neo.com

forEach ist kein Funktionsfehler bei einem JavaScript-Array

Ich versuche eine einfache Schleife zu machen:

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

Ich erhalte jedoch den folgenden Fehler:

VM384: 53 Nicht gefundener TypeError: parent.children.forEach ist keine Funktion

Obwohl parent.children protokolliert:

 enter image description here

Was könnte das Problem sein?

Hinweis: Hier ist ein JSFiddle .

javascriptecmascript-6vue.js
56
alexchenco

Der parent.children ist ein Array-ähnliches Objekt. Verwenden Sie die folgende Lösung:

const parent = this.el.parentElement;
console.log(parent.children);
Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

Der parent.children ist NodeList, was ein Array-ähnliches Objekt ist, weil:

  • Es enthält die length-Eigenschaft, die die Anzahl der Knoten angibt
  • Jeder Knoten ist ein Eigenschaftswert mit einem numerischen Namen, beginnend mit 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Weitere Details finden Sie in diesem Artikel .

59
Dmitri Pavlutin

parent.children ist kein Array. Es ist HTMLCollection und hat keine forEach-Methode. Sie können es zuerst in das Array konvertieren. Zum Beispiel in ES6:

Array.from(parent.children).forEach(function (child) {
    console.log(child)
});

oder mit Spread-Operator:

[...parent.children].forEach(function (child) {
    console.log(child)
});
55
madox2

parent.children gibt eine Knotenliste zurück, technisch eine HTML-Element Collection. Dies ist ein Array wie ein Objekt, jedoch kein Array. Daher können Sie keine Array-Funktionen direkt darüber aufrufen. In diesem Kontext können Sie Array.from() verwenden, um dies in ein reales Array umzuwandeln.

Array.from(parent.children).forEach(child => {
  console.log(child)
})
9
Rajaprabhu Aravindasamy

Eine naive -Version, die zumindest sicher ist, dass sie auf allen Geräten ohne Konvertierung und ES6 funktioniert:

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

https://jsfiddle.net/swb12kqn/5/

7
Jean

parent.children ist eine HTMLCollection, die ein Array-ähnliches Objekt ist. Zuerst müssen Sie es in eine echte Array konvertieren, um Array.prototype-Methoden verwenden zu können.

const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
  console.log(child)
})
6
Dmitriy

Das liegt daran, dass parent.children eine NodeList ist und die .forEach-Methode nicht unterstützt (da NodeList eine Array-ähnliche Struktur ist, jedoch kein Array). Versuchen Sie also, sie aufzurufen, indem Sie sie zuerst in Array konvertieren

var children = [].slice.call(parent.children);
children.forEach(yourFunc);
6
Ammar Hasan

Wenn Sie versuchen, eine NodeList-Schleife wie folgt zu durchlaufen:

const allParagraphs = document.querySelectorAll("p");

Ich empfehle es auf diese Weise:

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

Ich persönlich habe verschiedene Möglichkeiten ausprobiert, aber die meisten funktionierten nicht, da ich eine Variable NodeList durchlaufen wollte, aber diese funktioniert wie ein Zauber, probieren Sie es aus!

Die NodeList ist kein Array, aber wir behandeln es mit Array. als Array. Sie müssen also wissen, dass es in älteren Browsern nicht unterstützt wird!

Benötigen Sie weitere Informationen zu NodeList? Bitte lesen Sie die Dokumentation zu MDN .

3
Elharony

Da Sie Funktionen von ES6 verwenden ( Pfeilfunktionen ), können Sie auch einfach eine for-Schleife wie folgt verwenden:

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

2
Armfoot

Keine Notwendigkeit für forEach, Sie können nur mit dem zweiten Parameter von from iterieren, wie folgt:

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

2
Armfoot

Das hat immer für mich funktioniert

const someElement = document.querySelectorAll('.someElement');

  someElement.forEach((element) => {
    // Your code here
  });
0
King James Enejo