javascript エラー「Uncaught TypeError: xxx.forEach is not a function」の解決方法

javascript エラー「Uncaught TypeError: xxx.forEach is not a function」の解決方法

javascriptで、エラー「Uncaught TypeError: xxx.forEach is not a function」が発生した場合の原因と解決方法を記述してます。

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 104.0.5112.81

エラー内容

以下のコードを実行した際に発生。
他のパターンは後述してます。

let obj = {
    "a": "1",
    "b": "2",
    "c": "3"
}

obj.forEach(function (v,i) {
    console.log(v);
});

エラーメッセージ

Uncaught TypeError: obj.forEach is not a function

画像

firefox102の場合は、以下のエラーが発生します。

Uncaught TypeError: obj.forEach is not a function

画像

safari15.5では、以下のエラーとなります。

TypeError: obj.forEach is not a function. (In 'obj.forEach(function (v,i) {
    console.log(v);
})', 'obj.forEach' is undefined)

画像

原因

オブジェクトは「forEach」だけでは処理できない。

解決方法

オブジェクトのプロパティを配列として取得可能な「Object.keys」を使用する

let obj = {
    "a": "1",
    "b": "2",
    "c": "3"
}

console.log( Object.keys(obj) ) // ['a', 'b', 'c']

Object.keys(obj).forEach( function (v) {
    console.log(`key : ${v} value : ${obj[v]}`);
});

実行結果

その他のパターン

「HtmlCollection」に使用

「HtmlCollection」に使用した場合も同じエラーが発生します。

<ul class="foo">
    <li class="one">1</li>
    <li class="two">2</li>
    <li class="two">3</li>
</ul>

<button id="btn">削除</button>

<script>

'use strict';

document.getElementById('btn').addEventListener('click', function () {

    const elm = document.getElementsByClassName('two');

    if (0 < elm.length) {
        elm.forEach(function(v){ return v.remove() })
    }

});

</script>

スプレッド構文を使用して、配列に変換すれば解決します。

document.getElementById('btn').addEventListener('click', function () {

    const elm = document.getElementsByClassName('two');

    if (0 < elm.length) {
        [...elm].forEach(function(v){ return v.remove() })
    }

});