情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

ECMAScript 6の新機能(7)イテラブル

2016/05/27

ECMAScript 6でイテラブルという新しい概念が導入されました。

イテラブルとは

一般的にイテラブルとは1つずつ要素を取得することができるもののことであり、ECMAScriptではSymbol.iteratorというシンボルをキーとする適切な関数を実装しているオブジェクトのことです。

イテラブルの例

ECMAScript 6では主に下のようなオブジェクトがイテラブルとなっています。

  • 配列
  • 文字列

イテラブルの仕組み

Symbol.iteratorをキーとする関数はイテレータと呼ばれるオブジェクトを返さなければなりません。

イテレータには必ずnext関数を含めなければなりません。そして、next関数は呼び出される毎にイテラブルの要素を表すオブジェクトを1つずつ順番に返さなければなりません。

更に、要素を表すオブジェクトは要素の値を表すvalueプロパティと全ての要素が返されたかを真偽値として(あるいは、真偽値に評価される値として)表すdoneプロパティを有しなければなりません(doneプロパティの値は真偽値に評価さえされれば良いので、doneプロパティでfalseを返す代わりにdoneプロパティ自体を省略しても構いません)。

また、イテレータにはreturn関数を含めることもできます。return関数は全ての要素が取得される前に要素の取得が中断される場合に呼び出される関数であり、要素の取得が中断された際に何らかの後処理を行わなければならない場合に使用します。そして、return関数は値がtruedoneプロパティを有するオブジェクトを返さなければなりません。

たとえば、配列が上の条件を満たしたSymbol.iteratorをキーとする関数を実装していることは下のようにして確認することができます。

C:\work\node>node
> var array = ['foo', 'bar', 'baz']
undefined
> var iter = array[Symbol.iterator]()
undefined
> iter.next()
{ value: 'foo', done: false }
> iter.next()
{ value: 'bar', done: false }
> iter.next()
{ value: 'baz', done: false }
> iter.next()
{ value: undefined, done: true }
> iter.next()
{ value: undefined, done: true }
> iter.next()
{ value: undefined, done: true }

配列

配列がイテラブルとして扱われる場合には配列の穴(値が設定されていない要素)の値はundefinedとなります。

C:\work\node>node
> var array = ['foo', 'bar', , 'baz']
undefined
> var iter = array[Symbol.iterator]()
undefined
> iter.next()
{ value: 'foo', done: false }
> iter.next()
{ value: 'bar', done: false }
> iter.next()
{ value: undefined, done: false }
> iter.next()
{ value: 'baz', done: false }
> iter.next()
{ value: undefined, done: true }

...演算子

ECMAScript 6で...演算子が追加されました。

これはイテラブルに対する1項演算子であり、配列の中で使用すると配列中の記述した位置にイテラブルの全ての要素を順番に格納し、引数リストの中で使用すると引数リスト中の記述した位置からイテラブルの全ての要素を順番に引数として指定します。

C:\work\node>node
> var array = ['foo', 'bar', 'baz']
undefined
> ['x', array, 'y']
[ 'x', [ 'foo', 'bar', 'baz' ], 'y' ]
> ['x', ...array, 'y']
[ 'x', 'foo', 'bar', 'baz', 'y' ]
> var xs = [100, 565, 444]
undefined
> Math.max(200, xs, 111)
NaN
> Math.max(200, ...xs, 111)
565
pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ecmascript 2015, ecmascript 6, Javascript