JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法について解説していきます。

for-of文でindexの値も取得する方法と、TypeScriptで使用する場合の注意点

for-of文でindexの値も取得する方法

for-of 文を使うときにindexの値も同時に取得したい場合は、次のような処理をします。

const numList = [0, 1, 2, 3, 6, 12];

// [key, value] ペアの配列イテレーターを作成 & 分割代入
for (const [index, num] of numList.entries()) {
  console.log(`index: ${index}, num: ${num}`);
}

ポイントは、次の2点です。

1. Array.entries()で[key, value]ペアの配列イテレーターを作成する。
2. [key, value]の形で分割代入してfor ofを回す。

TypeScriptで、for-of文でindexの値も取得する場合の注意点

TypeScriptで、for-of文でindexの値も取得する場合、次のようなType IterableIteratorエラーが発生する場合があります。

これはtsconfig.jsonのtarget を ES5 以下に設定している場合に発生するエラーになります。

tsconfig.jsonのcompilerOptionsに"downlevelIteration": trueを追加することで、このコンパイルエラーは解決できます。

{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true,
  },
}

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

参考・引用

1. ES6 の for-of 文でプロパティの値と一緒に index の値も取得する
2. Array.prototype.entries()

最近の投稿

2024年1月17日【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 2024年1月17日JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) 2023年12月30日PythonでCSVをJSONに変換する方法 2023年12月30日PythonでCSV・Dataframeを指定の行数まで切り取る方法 2023年12月28日JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 2023年12月28日VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法