Array.@@iterator をマスターして、JavaScriptスキルを向上させよう

JavaScript 配列の Array.@@iterator について

イテレータとは？

イテレータは、値のシーケンスを順に取得するためのオブジェクトです。イテレータオブジェクトには、次の2つの重要なメソッドがあります。

• next(): 次の値を取得します。
• done: イテレーションが完了したかどうかを示します。

Array.@@iterator を使用するには、以下の2つの方法があります。

シンボルを使用する

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();

// イテレータオブジェクトから値を取得
let next = iterator.next();
while (!next.done) {
  console.log(next.value); // 1, 2, 3
  next = iterator.next();
}

for-of ループを使用する

const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // 1, 2, 3
}

上記の例では、どちらも同じ結果を出力します。for-of ループは、Array.@@iterator を内部的に使用して、配列の要素を順番に取得しています。

Array.@@iterator を使用すると、以下のような利点があります。

• 簡潔なコード: forループやforEachループなどの反復処理をより簡潔に記述できます。
• 効率的な処理: イテレータオブジェクトは、配列の要素を直接アクセスするため、ループ処理の効率が向上します。
• 汎用性: イテレータオブジェクトは、さまざまな反復処理で使用できます。

Array.@@iterator は、JavaScript の Array オブジェクトに備わる便利なプロパティです。イテレータオブジェクトを使用することで、配列の要素を順番に取得するためのコードをより簡潔かつ効率的に記述できます。

補足

• Array.@@iterator は、非標準の名前です。標準の名前は、Array.prototype[Symbol.iterator] です。
• イテレータオブジェクトは、ES6で導入されました。

Array.@@iterator のサンプルコード

配列の要素を順番に取得する

const arr = [1, 2, 3, 4, 5];

// シンボルを使用する
const iterator = arr[Symbol.iterator]();
let next = iterator.next();
while (!next.done) {
  console.log(next.value); // 1, 2, 3, 4, 5
  next = iterator.next();
}

// for-of ループを使用する
for (const value of arr) {
  console.log(value); // 1, 2, 3, 4, 5
}

偶数のみ取得する

const arr = [1, 2, 3, 4, 5];

// イテレータオブジェクトを使用して、偶数のみ取得
const iterator = arr[Symbol.iterator]();
let next = iterator.next();
while (!next.done) {
  if (next.value % 2 === 0) {
    console.log(next.value); // 2, 4
  }
  next = iterator.next();
}

配列の要素を逆順に取得する

const arr = [1, 2, 3, 4, 5];

// イテレータオブジェクトを使用して、配列の要素を逆順に取得
const iterator = arr[Symbol.iterator]({
  reverse: true,
});
let next = iterator.next();
while (!next.done) {
  console.log(next.value); // 5, 4, 3, 2, 1
  next = iterator.next();
}

イテレータオブジェクトを自作する

class MyIterator {
  constructor(arr) {
    this.arr = arr;
    this.index = 0;
  }

  next() {
    return {
      value: this.arr[this.index++],
      done: this.index === this.arr.length,
    };
  }
}

const arr = [1, 2, 3, 4, 5];
const iterator = new MyIterator(arr);
let next = iterator.next();
while (!next.done) {
  console.log(next.value); // 1, 2, 3, 4, 5
  next = iterator.next();
}

• 配列の要素をフィルタリングしたり、マッピングしたりするには、Array.prototype.filter() や Array.prototype.map() などのメソッドを使用できます。
• イテレータオブジェクトは、Promise や async/await とも使用できます。

Array.@@iterator 以外の方法

for ループ

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1, 2, 3, 4, 5
}

forEach ループ

const arr = [1, 2, 3, 4, 5];

arr.forEach((value) => {
  console.log(value); // 1, 2, 3, 4, 5
});

while ループ

const arr = [1, 2, 3, 4, 5];
let i = 0;

while (i < arr.length) {
  console.log(arr[i]); // 1, 2, 3, 4, 5
  i++;
}

do-while ループ

const arr = [1, 2, 3, 4, 5];
let i = 0;

do {
  console.log(arr[i]); // 1, 2, 3, 4, 5
  i++;
} while (i < arr.length);

これらの方法は、Array.@@iterator よりもシンプルで分かりやすいですが、コードが冗長になる場合もあります。

その他

• Promise や async/await とも使用できます。

Array.@@iterator は、JavaScript の配列を反復処理するための便利な方法です。しかし、他の方法も状況に応じて使い分けることが重要です。