[解決済み】JavaScriptの配列でforEachが関数でない不具合

質問

javascriptのコードです。

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

でも、エラーが出るんです。

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

そして parent.children のログを表示します。

注：以下は JSFiddle .

解決方法は？

最初の選択肢：forEachを間接的に呼び出す

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

const parent = this.el.parentElement;

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

は parent.children は NodeList という型があり、これはArrayライクなオブジェクトだからです。

• を含んでいます。 length プロパティがあり、これはノードの数を示しています
• 各ノードは、0から始まる数値名を持つプロパティ値である。 {0: NodeObject, 1: NodeObject, length: 2, ...}

詳細はこちら この記事 .

第二の選択肢：イテラブルプロトコルを使用する

parent.children は HTMLCollection を実装しています。 反復可能プロトコル . ES2015 の環境下では HTMLCollection を、イテラブルを受け付けるあらゆるコンストラクションで使用できます。

使用方法 HTMLCollection をスプレッド演算子で指定します。

const parent = this.el.parentElement;

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

または for..of サイクル（これは私が好むオプションです）を使用します。

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}