1.1 基本的な概念
JavaScriptのiterablesとiteratorsは、オブジェクトを繰り返し可能にするための基本的なコンセプトだよ。この概念は現代のJavaScriptで広く使われていて、特にfor...ofループとか、spread operator、分割代入とかに使われるんだ。この講義では、iterablesとiteratorsが何か、どう動くのか、そしてどうやって作ったり使ったりするのかを見ていこう。
Iterables (イテラブルなオブジェクト)
イテラブルなオブジェクトってのは、イテレーションプロトコルを実装しているオブジェクトのことだよ。特別なメソッドを持っていて、それは[Symbol.iterator]というキーで、イテレータオブジェクトを返すんだ。
Iterators (イテレーター)
イテレーターはnext()メソッドを持つオブジェクトで、そのメソッドが2つのプロパティを持つオブジェクトを返すんだ:
value— 次の要素の値だよdone— ブール値で、シーケンスが終了したかどうかを示す (true) またはまだ続くか (false)
使い方の例を見てみよう。
組み込みのイテラブルなオブジェクト
JavaScriptにはいくつかの組み込みのイテラブルなオブジェクトがあるよ、たとえば配列、文字列、SetやMapオブジェクトとかね。
例 1: 配列のイテレーション
const array = [1, 2, 3, 4, 5];
for (const item of array) {
console.log(item);
}
// 出力: 1 2 3 4 5
例 2: 文字列のイテレーション
const string = 'hello';
for (const char of string) {
console.log(char);
}
// 出力: h e l l o
1.2 自作のイテレーターを作る
自分でイテレーターを作ることもできるよ、イテレーションプロトコルを実装してnext()メソッドを作ればいいんだ。
例 1: イテレーターを作る
function createIterator(array) {
let index = 0;
return {
next: function() {
if (index < array.length) {
return { value: array[index++], done: false };
} else {
return { done: true };
}
}
};
}
const myIterator = createIterator([1, 2, 3]);
console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { done: true }
イテラブルなオブジェクトを作る
あるオブジェクトをイテラブルにするには、[Symbol.iterator]メソッドを実装する必要があるんだ。そうだね、ちょっとトリッキーな名前だね。どうやって作るか見てみよう。
例 2: イテラブルなオブジェクトを作る
const myIterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
for (const value of myIterable) {
console.log(value);
}
// 出力: 1 2 3
1.3 組み込みメソッド
イテラブルなオブジェクトを扱うための組み込みメソッドやオペレーターについて見ていこう。
例 1: Spreadオペレーター
Spreadオペレーター (...) はイテラブルなオブジェクトをコピーしたり結合したりするのに使えるよ。
const array = [1, 2, 3];
const newArray = [...array, 4, 5, 6];
console.log(newArray); // 出力: [1, 2, 3, 4, 5, 6]
例 2: 分割代入
分割代入はイテラブルなオブジェクトから値を取り出すために使えるよ。
const [first, second, third] = [1, 2, 3];
console.log(first); // 出力: 1
console.log(second); // 出力: 2
console.log(third); // 出力: 3
例 3: Array.from と Array.of メソッド
Array.from() メソッドはイテラブルなオブジェクトから配列を作成するためのものだよ。
const set = new Set([1, 2, 3, 4, 5]);
const array = Array.from(set);
console.log(array); // 出力: [1, 2, 3, 4, 5]
GO TO FULL VERSION