javascript エラー「Uncaught TypeError: xxx.forEach is not a function」の解決方法
- 作成日 2022.08.13
- javascript
- javascript
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() })
}
});
-
前の記事
mongoDB indexを削除する 2022.08.13
-
次の記事
Linux ファイルの詳細を確認する 2022.08.13
コメントを書く