※スマホ対応はしてません。

タグ: for-of

反復処理の中身、IterableとIteratorについて仕様書を調べてみた。(配列とかおれおれAdvent Calendar2018 – 19日目)

カテゴリー: JavaScript

LINDORのAdvent Calendar(本物)の19日目を開けたところ。
配列とかおれおれAdvent Calendar2018 – 19日目

ここまで何度か出てきた反復可能 (iterable) と反復子 (iterator) のお話です。やっと。

先にまとめ

  • Iterableオブジェクトは
    • Iteratorを返すメソッド [Symbol.iterator] を持つ
    • for-of で使える
  • Iteratorオブジェクトは
    • IteratorResultを返すメソッド next() を持つ
  • IteratorResultオブジェクトは
    • プロパティ done, value を持つ
  • 配列は
    • Iterableである
    • Iteratorではない
  • arr.values() は
    • Iterableである
    • Iteratorである
  • Generatorオブジェクトは
    • Iterableであり、かつIteratorである
  • Generator関数は
    • function*(){} のやつ
    • Generatorオブジェクトを返す

自作例

// Iteratorはnext()を持つ
class MyIterator {
  constructor () {
    this.index = 0;
    this.values = [11, 22, 33];
  }

  next () {
    const value = this.values[this.index];
    this.index += 1;
    const result = { done: !value, value };
    return result;
  }
}

// Iterableは[Symbol.iterator]()を持つ
class MyIterable {
  [Symbol.iterator] () {
    return new MyIterator();
  }
}

const iterable = new MyIterable();
for (const value of iterable) {
  console.log(value);
}
// 11
// 22
// 33

反復 (iteration)

IterableとIteratorは、実在するコンストラクターではなく概念的な「インターフェイス」として定義されています。仕様だけが示されて、それを満たせば「これはIterableである」とかなんとか言って良いということです。

仕様書のIterationの章は、インターフェイスについての説明から始まります。

An interface is a set of property keys whose associated values match a specific specification. Any object that provides all the properties as described by an interface’s specification conforms to that interface. An interface is not represented by a distinct object. There may be many separately implemented objects that conform to any interface. An individual object may conform to multiple interfaces.

  • インターフェイスとは、関連する値が特定の仕様に合致するプロパティキーの組み合わせである。
  • インターフェイスの仕様で述べられるすべてのプロパティを提供するあらゆるオブジェクトは、そのインターフェイスに準拠している。
  • インターフェイスは個別のオブジェクトとしては存在しない。
  • あるインターフェイスに準拠する、別々に実装されている複数のオブジェクトがあってもよい。
  • 個々のオブジェクトが複数のインターフェイスに準拠してもよい。

(※訳注: 勝手に1文ごとに箇条書きへ変換しました。内容はそのまま。)

ちなみに isIterable() や isIterator() のようなものは仕様にはありません。まあメソッド実行して戻り値が正しいことまで確認しないといけないので、JavaScriptで綺麗につくるのはちょっと難しいっすかね。

定義されているインターフェイス

5種あります。

  • 反復可能 Iterable
  • 反復子 Iterator
  • 非同期反復可能 AsyncIterable
  • 非同期反復子 AsyncIterator
  • 反復結果 IteratorResult

反復可能 (Iterable)

[Symbol.iterator]() メソッドが反復子を返すもの。

for-of で使えるやつ。配列とか、 Set とか、配列とか、文字列とか、あと配列とか。

仕様が短い。

Property Value Requirements
@@iterator A function that returns an Iterator object. The returned object must conform to the Iterator interface.

プロパティ 値 要求
@@iterator Iterator オブジェクトを返す関数。 返却されるオブジェクトは Iterator インターフェイスに準拠しなければならない。

[Symbol.iterator]() メソッド

仕様書では @@iterator という形で表現される名前のメソッドです。特別なものなので、名前が文字列ではなくシンボルになっています。知らんけど。

この [Symbol.iterator]() という名前でIteratorを返すオブジェクトをIterableと呼べるという話だけど、それ以外のメソッドがIteratorを返すのは自由です。例えば配列はこの [Symbol.iterator]() メソッドを持ちますが、他にも values() というIteratorを返すメソッドも持っています。

ちなみに arr[Symbol.iterator] === arr.values です。

実装例

Iteratorが何かは次項に譲りつつ、それを返す [Symbol.iterator]() メソッドを持つオブジェクト(のクラス)です。

class MyIterable {
  [Symbol.iterator] () {
    return new MyIterator();
  }
}

反復子 (Iterator)

next() メソッドを持ち、それを使って反復できるもの。

Object.values() とか。for-of を for に分解したときに出てくるやつ。

Property Value Requirements
next A function that returns an IteratorResult object. The returned object must conform to the IteratorResult interface. If a previous call to the next method of an Iterator has returned an IteratorResult object whose done property is true, then all subsequent calls to the next method of that object should also return an IteratorResult object whose done property is true. However, this requirement is not enforced.

Note 1

Arguments may be passed to the next function but their interpretation and validity is dependent upon the target Iterator. The for-of statement and other common users of Iterators do not pass any arguments, so Iterator objects that expect to be used in such a manner must be prepared to deal with being called with no arguments.

プロパティ 値 要求
next IteratorResult オブジェクトを返す関数。 返却されるオブジェクトは IteratorResult インターフェイスに準拠しなければならない。もし Iterator の前回の next メソッド呼び出しが返した IteratorResult の done プロパティが true である場合、以降の next メソッド呼び出しが返す IteratorResult オブジェクトも done プロパティが true になるだろう (should) 。ただし、この要求は強制されない。

ノート1

引数を next 関数へ与えても良いが、それらの解釈や妥当性は対象 Iterator に依る。 for-of 構文やその他の一般的な Iterator の利用者は引数を何も与えないため、そのような作法での利用が想定される Iterator オブジェクトは、引数なしで呼ばれた場合も対処するようになっていなければならない。

実装例

内包する値が固定だけど。

class MyIterator {
  constructor () {
    this.index = 0;
    this.values = [11, 22, 33];
  }

  next () {
    const value = this.values[this.index];
    this.index += 1;
    const result = { done: !value, value };
    return result;
  }
}

任意のプロパティ

next() は必須だけど、他に return() と throw() を実装しても良いそうです。

Property Value Requirements
return A function that returns an IteratorResult object. The returned object must conform to the IteratorResult interface. Invoking this method notifies the Iterator object that the caller does not intend to make any more next method calls to the Iterator. The returned IteratorResult object will typically have a done property whose value is true, and a value property with the value passed as the argument of the return method. However, this requirement is not enforced.
throw A function that returns an IteratorResult object. The returned object must conform to the IteratorResult interface. Invoking this method notifies the Iterator object that the caller has detected an error condition. The argument may be used to identify the error condition and typically will be an exception object. A typical response is to throw the value passed as the argument. If the method does not throw, the returned IteratorResult object will typically have a done property whose value is true.

Note 2

Typically callers of these methods should check for their existence before invoking them. Certain ECMAScript language features including for-of, yield*, and array destructuring call these methods after performing an existence check. Most ECMAScript library functions that accept Iterable objects as arguments also conditionally call them.

プロパティ 値 要求
return IteratorResult オブジェクトを返す関数。 返却されるオブジェクトは IteratorResult インターフェイスに準拠しなければならない。このメソッドの呼び出しは Iterator オブジェクトへ、呼び出し側がこれ以上 next メソッド呼び出しを行う意図がないことを通知する。返却される IteratorResult の done プロパティは、一般に true になり、 value プロパティは return メソッドの引数に与えられた値となる。ただし、この要求は強制されない。
throw IteratorResult オブジェクトを返す関数。 返却されるオブジェクトは IteratorResult インターフェイスに準拠しなければならない。このメソッドの呼び出しは Iterator オブジェクトへ、呼び出し者がエラー状態を検出したことを通知する。引数はエラー状態特定のために使ってもよく、また多くの場合は例外オブジェクトになる。代表的な目的は引数として渡された値を throw することである。このメソッドが throw しない場合、返却される IteratorResult の done プロパティは、一般に true になる。

ノート2

一般的にこれらのメソッドの呼び出し側は、その存在を確認してから呼び出すことになるだろう (should) 。 for-of や yield* 、配列の分解 (destructuring) といった、信頼できるECMAScript言語の機能は存在確認を実行した後にこれらのメソッドを呼び出している。 Iterable オブジェクトを受け付けるほとんどのECMAScriptライブラリー関数もまた、条件次第でこれらを呼ぶようになっている。

反復可能な反復子

ECMAScriptでIteratorとして記述されているものは、いずれも %IteratorPrototype% という秘密のプロトタイプを継承するようになっています。

このプロトタイプは単に this を返すだけの [Symbol.iterator]() を持つとされます。

つまり標準のIteratorは反復可能であり、Iteratorが作るIteratorは自身である (it === it[Symbol.iterator]()) というわけですね。

と、そうわけで配列はもちろんのこと、配列から明示的に生成したIteratorもまた for-of で使えるのです。

const arr = [11, 22, 33];

for (const value of arr) {
  console.log('arr', value);
}
// arr 11
// arr 22
// arr 33

const it = arr.values();
for (const value of it) {
  console.log('it', value);
}
// it 11
// it 22
// it 33

非同期の反復可能、反復子

for-await-of で使えるやつ。

基本的に同期のものと同じっぽい。

違うのは、 next() が返すものが「 IteratorResult オブジェクト」から「 IteratorResult オブジェクトのプロミス」になってる点。

反復結果 (IteratorResult)

いろいろ書いてあるけど、持ってるのは値だけなんで、実際そんなにややこしくはないね。

Property Value Requirements
done Either true or false. This is the result status of an iterator next method call. If the end of the iterator was reached done is true. If the end was not reached done is false and a value is available. If a done property (either own or inherited) does not exist, it is consider to have the value false.
value Any ECMAScript language value. If done is false, this is the current iteration element value. If done is true, this is the return value of the iterator, if it supplied one. If the iterator does not have a return value, value is undefined. In that case, the value property may be absent from the conforming object if it does not inherit an explicit value property.

プロパティ 値 要求
done true か false 。 これは iterator の next メソッド呼び出しの結果状態である。iteratorが最後まで到達していれば done は true になる。iteratorが最後まで到達していなければ done は false になり、 value は有効になる。 done プロパティ(自身のものでも継承したものでも)が存在しない場合は false 値を持つものとみなす。
value ECMAScript言語の任意の値。 done が false の場合、これは現在の反復要素の値である。 done が true の場合、これは iterator の戻り値である。(あれば。) iterator が戻り値を持たない場合、 value は undefined になる。その場合、確認中のオブジェクトが明確な value プロパティを継承していなければ value プロパティはそのオブジェクトから欠落してもよい (may) 。

ジェネレーター

反復子でありながら反復可能であるもの

A Generator object is an instance of a generator function and conforms to both the Iterator and Iterable interfaces.

Generator instances directly inherit properties from the object that is the value of the prototype property of the Generator function that created the instance. Generator instances indirectly inherit properties from the Generator Prototype intrinsic, %GeneratorPrototype%.

Generatorオブジェクトはgenerator関数のインスタンスであり、 Iterator と Iterable インターフェイスの両方に準拠するものである。

Generatorインスタンスはそのインスタンスを生成したGenerator関数の prototype プロパティの値であるオブジェクトから直接的にプロパティを継承する。Generatorインスタンスは固有のGeneratorプロトタイプ、%GeneratorPrototype%から非直接的にプロパティを継承する。

Generator関数 (function*(){}) の正体がわかりましたね!

function* f () {
  yield 1;
}
f.prototype.sayHello = () => console.log('Hello!');

const it = f();
it.sayHello();
// Hello!

for-of とIterable

GetIterator() という内部処理があって、こいつで of 右側のオブジェクトから例の [Symbol.iterator]() を通してIteratorを取得してます。取得できなければ TypeError 。

第3引数に任意の method を渡せるようになってるけど、仕様書見た感じ全部 @@iterator か @@asyncIterator みたい。

その他

Object.values() vs arr.values()

Object.values(obj) はただの配列を返して、その中身が obj のプロパティ値になります。

arr.values() は arr の項目を順に返すIteratorを返します。

おまけ: 英単語 iteration vs repetition

反復と繰り返し、どちらも同じような意味だけど、どう違うんだろうか。

これの回答がわかりやすい。(合ってるのかどうかは判断しかねるが。)

Iteration uses an iterator to count through a list of (usually different) items:

Today, I must:
1: go shopping
2: clean the house
3: mow the lawn

Repetition does the same thing again, and again, etc…:

One sheep, two sheep, three sheep, …

漫画の単行本を続けて読むのが iterate で、同じ本を何度も読むのが repeat てな感じみたい。

おしまい

ほとんどただの翻訳になってしまった。

まあ仕様書が一番わかりやすいから仕方ない。

関連

参考

for-ofで配列も普通のオブジェクトも反復しよう。(配列とかおれおれAdvent Calendar2018 – 15日目)

カテゴリー: JavaScript

LINDORのAdvent Calendar(本物)の15日目を開けたところ。
配列とかおれおれAdvent Calendar2018 – 15日目

繰り返しにもいろいろあるよ。

for-in じゃない方です。 こっち使おう。

for-of 文

for-in と違って値の方を持ってきてくれます。

const arr = [11, 22, 33];

for (const value of arr) {
  console.log(value);
}

// 11
// 22
// 33

for に置き換え

反復可能なオブジェクトを対象とする for-of を普通の for 文に置き換えることもできます。

const arr = [11, 22, 33];

const it = arr.values();
for (let cur = it.next(); !cur.done; cur = it.next()) {
  const { value } = cur;
  console.log('for', value);
}

仕様

for-in, for-of, for-await-of は全部まとめて定義されてる。

ので、 for-in の方もみといてください。

for-in は列挙可能なプロパティ名を得ましたが、 for-of の方では反復子 (iterator) を用いた繰り返しを行います。

利用可能なオブジェクトと反復子 (iterator)

for-of は「反復可能」なオブジェクトでのみ利用可能です。

この「反復可能 iterable」であるとは、まあ本稿は for-of が主眼ですのでざっくり申し上げると、 [Symbol.iterator] メソッドがその 反復子 iterator オブジェクトを生成するよう適切に用意されている状態を言います。

自作もできます。

const obj = {
  * [Symbol.iterator] () {
    yield 11;
    yield 22;
    yield 33;
  },
};

詳しくは別稿(予定)をご覧ください。

で、配列は反復可能なオブジェクトなので使えます。

console.log(Symbol.iterator in arr); // => true

他に Set 、 Map それから String オブジェクトも反復可能です。 (文字列 "" 自体はだめ。オブジェクトでないのでメソッドもない。呼び出せるけど。)

未対応のオブジェクトを繰り返す

配列で使う分には簡単だったけど、普通のオブジェクトはそのままでは使えません。ひと手間必要。

const obj = {};
for (const value of obj) {
}
// TypeError: obj is not iterable

次の三通りのメソッドで、何の変哲もないただのオブジェクトから配列を生成します。 前項の通り、配列なら反復可能。

  • Object.values()
  • Object.keys()
  • Object.entries()

反復可能でない通常のオブジェクトはこれら通して反復可能なオブジェクトを得、それを for-of へ与えることができる、という算段です。

以下、こういうオブジェクトがある前提でコード例を提示します。

const obj = {
  foo: 11,
  bar: 22,
  boo: 33,
};

プロパティ値を繰り返す

for (const value of Object.values(obj)) {
  console.log(value);
}

// 11
// 22
// 33

プロパティ名を繰り返す

for (const key of Object.keys(obj)) {
  console.log(key);
}

// foo
// bar
// boo

名前と値を繰り返す

両方か!? key と value の両方ほしいのか? 両方……イヤしんぼめ!!

はい、そんな欲張りさんのための機能もあります。ちょっとわかりづらいんだけど、戻り値としてその2つだけを格納した配列の配列を返します。

for (const [key, value] of Object.entries(obj)) {
  console.log(key, ':', value);
}

// foo : 11
// bar : 22
// boo : 33

得られる順序

3つとも内部処理は同じこれ↓で、得られる順序は以下の通り。

  1. 整数インデックス昇順(を文字列にしたもの)
  2. 文字列キー追加順
const obj = {};

obj[2] = '#1';
obj.z = '#2';
obj[Symbol(1)] = '#3';
obj[10] = '#4';
obj.a = '#5';

console.log(obj);
// => { '2': '#1', '10': '#4', z: '#2', a: '#5', [Symbol(1)]: '#3' }

for (const [key, value] of Object.entries(obj)) {
  console.log(key, ':', value);
}

// 2 : #1
// 10 : #4
// z : #2
// a : #5

仕様はこちら。

ちなみに OrdinaryOwnPropertyKeys() ではキーが Symbol のものも追加順に取得しているのだけれど、その後 EnumerableOwnPropertyNames() の処理で文字列でないものは捨てられます。

先の例↑で console.log() の方では Symbol がキーになってるものも取れているのは、その処理が OrdinaryOwnPropertyKeys() を使ってるからなんでしょう。知らんけど、コンソールの仕様は。

任意の順序に

したい場合、別途 sort() してやります。

文字列順とか localeCompare() が便利っぽい。 (ちなみに local ではなく locale です。)

// プロパティ名昇順
const it = Object.entries(obj)
  .sort(([key1], [key2]) => key1.localeCompare(key2));
for (const [key, value] of it) {
  console.log(key, ':', value);
}

// bar : 22
// boo : 33
// foo : 11

sort() に与えた比較関数は実は省略可能なんですが、罠があったりするので、常に省略しないのが良いやり方かと思っております。

おしまい

強力。

関連

参考

イテレータとfor-of文で配列以外もぐーるぐる。(現代的JavaScriptおれおれアドベントカレンダー2017 – 22日目)

カテゴリー: JavaScript

現代的JavaScriptおれおれアドベントカレンダー2017 – 22日目

概要

配列とか Map とかは for-of 文を使って、添え字アクセス? [] を使わずにぐるぐるできます。

const arr = ['Hello', 'World', '!'];

for (let item of arr) {
  console.log(item);
}

普通のオブジェクトでは使えないけど、インターフェイスを追加すれば使えるようにもなります。

使い方

普通の for 文を使って配列で arr[i] する代わりに for-of でいきなり値を取ってこれます。

const arr = ['Hello', 'World', '!'];

for (let item of arr) {
  console.log(item);
}

配列以外でも反復可能なオブジェクト(後述)で使えます。

const map = new Map([[1, 11], [2, 22], [3, 33]]);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

文字列と絵文字

文字列でも使えます。絵文字とかのサロゲートペアを上手に扱ってくれます。やったね。

const str = '#sushi🍣';

console.log('--- for ---');
for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

console.log('--- for-of ---');
for (let item of str) {
  console.log(item);
}

--- for ---
#
s
u
s
h
i
�
�
--- for-of ---
#
s
u
s
h
i
🍣

反復可能なオブジェクト

for-of 文は反復可能なオブジェクトに対して利用することができます。

対応してないオブジェクトだとエラーに。

const obj = {};

for (let item of obj) {  // TypeError: obj[Symbol.iterator] is not a function
    console.log(item);
}

反復可能なオブジェクト

この「反復可能(イテラブル)なオブジェクト (iterable object)」とは、「イテレータ」を作成するインターフェイスを整えたオブジェクトのことです。配列 Array や Map 等が該当します。

インターフェイスが整っていれば何でも良いので、自作することもできます。

// 反復可能なオブジェクト
const iterable = {
  // for-ofに必要なインターフェイス
  [Symbol.iterator]() {
    const max = 10;
    let n = 0;

    const iterator = {
      next() {
        return { value: n++, done: n > max };
      },
    };

    return iterator;
  },
};

// よっしゃー使うぞー
for (let item of iterable) {
  console.log(item);
}

詳細は別稿参照。

その他

for-in と for-of

もちろん別物なんだけど、同じ項 (13.7.5) でまとめて定義されてるので、兄弟みたいなものらしい。

for-in はカンマ , 区切りの値を置ける

なんでOKなんだろ。

const arr1 = [100];
const arr2 = [200];

arr1.foo = 123;
arr2.bar = 123;
for (let index in arr1, arr2) {
  console.log(index);
}

もちろん末尾のもの arr2 が有効になります。

0
bar

for-of でやると構文エラーです。

const arr1 = [100];
const arr2 = [200];

for (let item of arr1, arr2) {  // SyntaxError: Unexpected token ,
  console.log(item);
}

for-in で初期値を書ける場面が

"use strict" の厳格モードでない場面で、 var をここで使用する場合のみ、初期値を置ける。 let を使ったり、別の場所で var 宣言してからの代入だとだめ。

const arr = [1, 2, 3];

for (var index = 'wow' in arr) {
  console.log(index);
}

といってもその初期値が適用される場面てあるんだろか。

謎仕様だなー。後方互換のためなのかな。

参考

  • ECMAScript® 2017 Language Specification
    • 13.7.5 The for-in and for-of Statements
    • 13.7.5.12 Runtime Semantics: ForIn/OfHeadEvaluation ( TDZnames, expr, iterationKind ) … イテレータの作成。初期処理的な
    • 13.7.5.13 Runtime Semantics: ForIn/OfBodyEvaluation ( lhs, stmt, iterator, iterationKind, lhsKind, labelSet ) … イテレータを使って反復処理する
    • 13.7.5.15 EnumerateObjectProperties ( O ) … for-in 用のイテレータ
    • 6.1.5.1 Well-Known Symbols … Symbole.iterator
    • 7.4.1 GetIterator ( obj [ , method ] )
    • 7.4.5 IteratorStep ( iterator ) … イテレータで反復
    • 25.1 Iteration
    • B.3.6 Initializers in ForIn Statement Heads … for-in で初期値使える
  • for…of – JavaScript | MDN
  • for…in – JavaScript | MDN