forEach non è un errore di funzione con array JavaScript

Question

Sto cercando di fare un semplice ciclo:

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

Ma io ottenere il seguente errore:

VM384:53 Uncaught TypeError: parent.children.forEach is not a function

anche se parent.children tronchi:

Quale potrebbe essere il problema?

Nota: Ecco uno JSFiddle.

Answer 1

Il parent.children è un array come oggetto. Utilizzare la seguente soluzione:

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

Il parent.children è NodeList tipo, che è una matrice come oggetto perché:

• Esso contiene la proprietà length, che indica il numero di nodi
• Ogni nodo è un valore di proprietà con nome numerico, a partire da 0: {0: NodeObject, 1: NodeObject, length: 2, ...}

Vedere di più ils in this article.

Answer 2

parent.children è un HTMLCollection che è un oggetto tipo array. Innanzitutto, devi convertirlo in un vero Array per utilizzare i metodi Array.prototype.

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

Answer 3

parent.children non è un array. È HTMLCollection e non ha il metodo forEach. Puoi prima convertirlo nell'array. Ad esempio in ES6:

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

o utilizzando l'operatore spread:

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

Answer 4

parent.children restituirà un elenco di nodi, tecnicamente un elemento html Collection. Questo è un array come oggetto, ma non un array, quindi non è possibile richiamare direttamente le funzioni dell'array. In questo contesto è possibile utilizzare Array.from() convertire in una vera e propria matrice,

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

Answer 5

Questo perché parent.children è un NodeList, e non supporta il metodo .forEach (come NodeList è un array come struttura, ma non è una matrice), quindi cercate di chiamare convertendo prima a matrice utilizzando

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

Answer 6

Un altro ingenuo versione, almeno il vostro sicuri che è il lavoro su tutti i testamentaria, senza conversione e ES6:

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

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

Answer 7

Non c'è alcuna necessità per il forEach, è può iterare usando solo il secondo parametro di from, in questo modo:

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

Answer 8

Dal momento che si sta utilizzando caratteristiche di ES6 (arrow functions), si può anche utilizzare semplicemente un for loop come questo:

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