解説
「イテレータ」（iterator）は、日本語に訳すと反復子です。イテレータは、配列のようなデータを次々に取り出せる構文やオブジェクトのことを指します。
イテレータには、内部的にデータを次々に取り出す仕組みがあり、データが終了するまで取り出し続けることができます。
こうした仕組みを使うと、要素番号を使うようなデータ構造に依存するコードを書かなくて済みます。そして、コードを簡潔に書けます。また、間違った位置のデータを参照することがないので、バグも出にくくなります。
初心者ではこうした内部的な仕組みを意識することはありません。中級者以降で気にする仕組みと言えるでしょう。
サンプル
「イテレータ」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「イテレータ」のサンプル</title>
<style> #output { font-size: 32px; line-height: 1.5; white-space: pre-wrap; } </style>
</head>
<body>
<pre id="output"></pre>
<script>
window.addEventListener('DOMContentLoaded', e => {
// 出力用の関数
const print = function() {
const el = document.querySelector('#output');
el.textContent += [...arguments].map(x => {
if (x !== null && typeof x === 'object') {
return '{ ' + Object.entries(x).map(y => `${y[0]}: ${y[1]}`).join(', ') + ' }'
}
return `${x}`;
}).join(', ') + '\n';
};
print('イテレータを使った配列の処理');
let arr = [10, 20];
for (let i of arr) {
print(i);
}
print('\n配列のイテレータを利用する1');
let a = [10, 20].values();
print('A0', a.next()); // { value: 10, done: false }
print('A1', a.next()); // { value: 20, done: false }
print('A2', a.next()); // { value: undefined, done: true }
print('\n配列のイテレーターを利用する2');
let b = [10, 20][Symbol.iterator]();
print('B0', b.next()); // { value: 10, done: false }
print('B1', b.next()); // { value: 20, done: false }
print('B2', b.next()); // { value: undefined, done: true }
print('\n同じものを指している');
print(['x', 'y'].values.name);
print(['x', 'y'][Symbol.iterator].name);
print('\nイテレータを自分で作る');
let itr = {};
itr[Symbol.iterator] = function() {
let count = 0;
const iterator = {
next() {
const iteratorResult = count < 4
? { value: String.fromCharCode(65 + count), done: false }
: { value: undefined, done: true }
count ++;
return iteratorResult;
}
};
return iterator;
}
for (i of itr) {
print(i);
}
});
</script>
</body>
</html>
出力結果
イテレータを使った配列の処理
10
20
配列のイテレータを利用する1
A0, { value: 10, done: false }
A1, { value: 20, done: false }
A2, { value: undefined, done: true }
配列のイテレータを利用する2
B0, { value: 10, done: false }
B1, { value: 20, done: false }
B2, { value: undefined, done: true }
同じものを指している
values
values
イテレータを自分で作る
A
B
C
D
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。
