JavaScript Array [Symbol.iterator]() メソッド

Array 对象参考手册JavaScript Array オブジェクト

例

配列のイテレータオブジェクトを取得し、ループで出力します：

const fruits = ['apple', 'banana', 'orange']; //1. 配列のイテレータオブジェクトを取得する const iterator = fruits[Symbol.iterator](); //2. イテレータの next() メソッドを手動で呼び出す console.log(iterator.next()); // { value: 'apple', done: false } console.log(iterator.next()); // { value: 'banana', done: false } console.log(iterator.next()); // { value: 'orange', done: false } console.log(iterator.next()); // { value: undefined, done: true } //3. for...of ループを使用する（内部で自動的に [Symbol.iterator]() が呼び出されます） for (const fruit of fruits) { console.log(fruit); } //出力: // apple // banana // orange //4. スプレッド演算子を使用する（イテレータにも依存します） const fruitCopy = [...fruits]; console.log(fruitCopy); // ['apple', 'banana', 'orange']

試してみる »

定義と用法

[Symbol.iterator]()これは JavaScript 配列の組み込みメソッドで、配列のデフォルトのイテレータを返します。このメソッドにより配列は反復可能オブジェクトとなり、for...ofループなどの構造で使用できます。

イテレータ（Iterator）とは？

説明を始めるにあたり、[Symbol.iterator]()そのメソッドの前に、まずイテレータとは何かを理解する必要があります。

イテレータは JavaScript におけるプロトコルの一種で、コレクション内の要素に順番にアクセスする方法を定義します。イテレータプロトコルを実装したオブジェクトはすべて、for...ofループ、スプレッド演算子（...）などの JavaScript の機能で使用できます。

イテレータオブジェクトは、1つのメソッドを実装する必要があります。next()そのメソッドは、2つのプロパティを含むオブジェクトを返します：

  • value：現在のイテレーションの値
  • done：反復が完了したかどうかを示すブール値

基本構文

const iterator = array[Symbol.iterator]();

サンプルコード

簡単な例を見てみましょう：

例

const fruits = ['apple', 'banana', 'orange'];

// 配列のイテレータを取得
const iterator = fruits[Symbol.iterator]();

console.log(iterator.next()); // { value: 'apple', done: false }
console.log(iterator.next()); // { value: 'banana', done: false }
console.log(iterator.next()); // { value: 'orange', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

この例では、次のことを行っています：

  1. 3種類の果物を含む配列を作成しました
  2. を通じて[Symbol.iterator]()メソッドで配列のイテレータを取得しました
  3. イテレータのメソッドを複数回呼び出し、next()このメソッドで配列内の各要素を順に取得しました。

実際の適用シナリオ

1. for...of ループを使用する

for...ofループ内部では配列の[Symbol.iterator]()メソッドが自動的に呼び出されます：

例

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// 出力:
// red
// green
// blue

2. スプレッド演算子を使用する

スプレッド演算子もイテレータプロトコルに依存します：

例

const numbers = [1, 2, 3];
const copiedNumbers = [...numbers];

console.log(copiedNumbers); // [1, 2, 3]

3. 分割代入（デストラクチャリング）

配列の分割代入もイテレータを使用します：

例

const [first, second] = ['a', 'b', 'c'];
console.log(first); // 'a'
console.log(second); // 'b'

配列の反復動作をカスタマイズする

ほとんど必要ありませんが、配列のデフォルトの[Symbol.iterator]()メソッドを上書きして反復動作をカスタマイズできます：

例

const customArray = [1, 2, 3];

customArray[Symbol.iterator] = function() {
  let index = this.length;
 
  return {
    next: () => {
      index--;
      return {
        value: this[index],
        done: index < 0
      };
    }
  };
};

for (const num of customArray) {
  console.log(num);
}
// 出力:
// 3
// 2
// 1

この例では、イテレータを変更して、配列を後ろから前に向かって反復させています。

他の反復メソッドとの比較

forEach() との違い

  • forEach()これは配列メソッドであり、各要素に対してコールバック関数を実行します。
  • [Symbol.iterator]()イテレータオブジェクトを返し、反復プロセスをより柔軟に制御できます。

keys()/values()/entries() との関係

これらのメソッドはすべてイテレータを返しますが、それぞれ異なる用途があります：

  • keys()：配列インデックスのイテレータを返します
  • values()：配列要素のイテレータを返します（[Symbol.iterator]()と同じ）
  • entries()：インデックス/値のペアのイテレータを返します

ブラウザ互換性

Array [Symbol.iterator]()メソッドは以下の環境でサポートされています：

  • Chrome 38+
  • Firefox 36+
  • Edge 12+
  • Safari 9+
  • Opera 25+
  • Node.js 0.12+

まとめ

Array [Symbol.iterator]()このメソッドは、JavaScript 配列が反復可能プロトコルを実装するための鍵です。このメソッドの動作原理を理解することで、以下のことが可能になります：

  1. JavaScript の反復メカニズムをより深く理解できる
  2. より効率的な反復コードを記述できる
  3. 必要に応じて反復動作をカスタマイズできる

覚えておいてください。ほとんどの場合、このメソッドを直接呼び出す必要はありません。なぜなら、for...ofループやその他の言語機能が内部で自動的に処理するからです。しかし、その動作原理を理解することで、より優れた JavaScript 開発者になることができます。

Array 对象参考手册JavaScript Array オブジェクト

その他の拡張