Javascript

【JavaScript】イテレータについて理解をまとめる

 

こんにちは、ともです。

絶賛JavaScriptのイテレータについて勉強中です。この記事ではJavaScriptのES6から実装されたイテレータについて理解をまとめたいと思います。

イテレータとは

英語（Iterate）の意味としては『繰り返す』という意味です。

イテレータとは何かWikipediaで調べました。

イテレータ – Wikipedia
https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF
イテレータ（英語: Iterator）とは、プログラミング言語において配列やそれに類似するデータ構造の各要素に対する繰返し処理の抽象化である。実際のプログラミング言語では、オブジェクトまたは文法などとして現れる。反復するためのものの意味で反復子（はんぷくし）と訳される。繰返子（くりかえし）という一般的ではない訳語もある。

JavaScriptだけではなくプログラミング言語ではよく目にするイテレータという機能。

イテレータ（Iterator）とはデータ構造の各要素に対して繰り返し処理によって要素を返す仕組みですね。

JavaScriptにおいてイテレータ（データ構造の各要素を返す仕組み）が搭載されたオブジェクトをイテラブル（Iterable）と呼びます。

イテレータを格納するキー（Symbol.iterator）

var obj = {}

obj[Symbol.iterator] = function () {
  return iterator//イテレータの仕組みを返す
}

オブジェクトをイテラブルにするためにイテレータの機能を実装します。

イテレータの機能を格納するキーとしてSymbol.iteratorが用意されているおり、このキーにイテレータの機能を格納します。

自作のイテラブルなオブジェクトを作成

イテラブルなオブジェクトを作成するために、オブジェクトに対してイテレータの機能を持たせます。

オブジェクトのSymbol.iteratorにイテレータとしての機能を格納することにより実現可能です。

イテレート中に{ value: val, done: false }を返し、最後までイテレートすれば{ done: true }を返すようなnext() を持つオブジェクトを格納します。

次のように只のオブジェクトobj = { a: 1, b: 2 }をイテラブルにしました。

var iterator = function () {
  var current = 0
  var keys = Object.keys(this)
  var that = this // objectに登録するとthat
  var iterator = {
    next() {
      if (current < keys.length) {
        var result = { value: that[keys[current]], done: false }
        current++;
        return result
      } else {
        return { done: true }
      }
    }
  }
  return iterator
}

var obj = { a: 1, b: 2 }
obj[Symbol.iterator] = iterator;//iterableにする

for (let val of obj) {
  console.log(val)// 1, 2
}

for (let key in obj) {
  console.log(key)// a, b
}

イテラブルなオブジェクトの場合、for...of やfor...inでイテレートすることが可能です。

objをイテラブルにしたことによりfor...of やfor...inを利用することができるようになりました。

まとめ

イテレータというデータ構造の各要素を取得する機能をオブジェクトに搭載する機能について書きました。

Symbol.iteratorというキーにイテレータ機能を実装することによりイテラブルなオブジェクトを作成することができます。

関連記事はこちら