web-dev-qa-db-ja.com

forEachはJavaScript配列の関数エラーではありません

私は簡単なループを作ろうとしています：

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

しかし、私は次のエラーが出ます：

VM384：53捕捉されないTypeError：parent.children.forEachは関数ではありません

parent.childrenがログに記録していても：

enter image description here

問題は何でしょうか。

注：これは JSFiddle です。

javascriptecmascript-6vue.js
73
alexchenco

parent.childrenは配列のようなオブジェクトです。次の解決策を使用してください。

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

parent.childrenはNodeList型です。これは、オブジェクトに似た配列です。

  • ノード数を示すlengthプロパティを含みます。
  • 各ノードは、0から始まる数値名のプロパティ値です。{0: NodeObject, 1: NodeObject, length: 2, ...}

詳しくは この記事 をご覧ください。

74
Dmitri Pavlutin

parent.childrenは配列ではありません。それはHTMLCollectionであり、それはforEachメソッドを持っていません。最初にそれを配列に変換することができます。例えばES6では：

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

またはスプレッド演算子を使用して：

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

parent.childrenはノードリスト、厳密にはhtml要素のCollectionを返します。これはobjectのような配列ですが、配列ではないので、直接配列関数を呼び出すことはできません。このコンテキストでは、Array.from()を使ってそれを実際の配列に変換することができます。

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

もっと素朴なバージョン、少なくとも変換とES6を使わなくてもすべてのデバイスで正常に動作することを確認：

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

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

8
Jean

parent.childrenは、配列のようなオブジェクトであるHTMLCollectionです。まず、Array.prototypeメソッドを使うには、それを実際のArrayに変換する必要があります。

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

なぜならparent.childrenは NodeList であり、.forEachメソッドをサポートしていないからです（NodeListは構造体のような配列ではなく配列ではないため）。まずを使ってそれを配列に変換してそれを呼び出す

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

このようにNodeListをループしようとしているなら：

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

このようにループすることを強くお勧めします。

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

個人的には、いくつかの方法を試してみましたが、そのほとんどはNodeListをループ処理したいのでうまくいきませんでしたが、これは魅力のように機能します。試してみてください。

NodeListは配列ではありませんが、Array.を使用して配列として扱いますので、古いブラウザではサポートされていないことを知っておく必要があります！

NodeListに関する詳細情報が必要ですか？ MDNに関する ドキュメントを読んでください 。

3
Elharony

forEachは必要ありません。 from の2番目のパラメーターのみを使用して反復できます。そのようです：

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

ES6の機能（ 矢印関数 ）を使用しているので、単純に をループに使用することもできます このように：

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

これはいつも私のために働きました

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

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