console.logの出力内容について教えてください。

Question

下記コードにおいて、なぜ出力結果は [0, a]のみですか？

'use strict';

{
  const array = ['a', 'b', 'c'];

  const iterator = array.entries();
  
  console.log(iterator.next().value);  

}

// (2) [0, "a"]

Comments

[otn]

何が表示されると思いましたか？

[kinsncn]

ありがとうございました。MDNを見ながら勉強しているところなので、正直何が表示されるかは予想できなかったです。

また、next()の部分が特に理解できないですね、同じconsoleを書くと次は[1, b]が表示されるのも不思議に思いました。

よろしくお願いいたします。

[Yasumichi]

ここで [0, "a"]や [1, b]は元の配列の添え字と内容のペアです。

[kinsncn]

インデクスと値がペアになって表示されるのはわかりますが、なぜ一つ[0,a]だけが表示されますか？
インデクス(0)を指定もしてないにも関わらず。
よろしくお願いいたします。

[Yasumichi]

それこそが、Iterator の目的なのです。Wikipedia ですが、次のリンクで説明を見てみてください。

https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%86%E3%83%AC%E3%83%BC%E3%82%BF

> イテレータ（英語: iterator）とは、プログラミング言語において配列やそれに類似する集合的データ構造（コレクションあるいはコンテナ）の各要素に対する繰り返し処理の抽象化である。

[coco_bauer]

nextが、日本語で"次"という意味なのはご存じですよね。

aさん、bさん、cさんが、この順番で行列に並んでいて、"次の人"と呼ばれたとしたら、誰の事だと思いますか？

aさんですよね。

[Yasumichi]

とても分かりやすい説明だと思います。そのまま、回答にしても良さそうです。

Answer 1

• Array.prototype.entries() - JavaScript | MDN

entries() メソッドは、配列内の各要素に対する key/value ペアを含む新しい Array Iterator オブジェクトを取得します。

iterator.next() を使うと次の key/value ペアが取り出せて、iterator が次に進みます。

開発者ツールのコンソールで以下を一行ずつ実施し、出力がどうなるか、見てみてください。

const array = ['a', 'b', 'c'];
const iterator = array.entries();
iterator.next().value
iterator.next().value
iterator.next().value
iterator.next().value

• Iterator - JavaScript | MDN

Comments

[kinsncn]

ありがとうございました。
.next()必須でしょうか？　iterator.next()で一つのキーワード（命令文？）になるでしょうか？
MDNを見るとiterator1.next()にしてもおなじ結果ですが。
よろしくお願いいたします。

[Yasumichi]

まず、次のページをじっくり読んでみてください。

JavaScript の イテレータ を極める！ - Qiita
https://qiita.com/kura07/items/cf168a7ea20e8c2554c6

[kinsncn]

ありがとうございました。ご連絡の記事の内容はまだ全部は理解できてないですが、
iteratorには.next() メソッドを持つ ことがよくわかりました。
ありがとうございました。

[Yasumichi]

質問への追記・修正で coco_bauer が書いている説明が、分かりやすいですね。

ただ、これだけだと腑に落ちないかもしれません。なんでこんなものが必要なのか、と思われると思います。

Java の世界から、持ってきた考え方だと思うのですが、Iteratable であることが期待されている関数などを作るときに便利になるんですよね。
受け取ったオブジェクトを順番に処理する場合は、そのオブジェクトの .next() を呼べばいいって、決まってたら、作りやすいですよね。

Answer 2

Arrayの要素にアクセスする方法が2つあります。
1つは、キーとなる数値を指定する。array[0]

1つは、「最初から順番に」です。
これがiteratorという機能です。繰り返しという意味。
アクセスは、「次」、「次」と、「最後」になるまで繰り返します。

わかりやすく書くと、

  const array = ['a', 'b', 'c'];

  const iterator = array.entries();

  let x;
  while(true){
      x = iterator.next();
      if(x.done) {
          console.log("終わりに達した");
          break;
      }
      console.log(x.value);
  }

Comments

[kinsncn]

丁寧なご説明ありがとうございました。

[kinsncn]

わかりやすいコードありがとうございました。