猫と遊ぶ　見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

for文であそんでみた　for-ofをもう少し掘り下げる

HTML JavaScript

先日、カレーをネタにしてfor-of文を作ってみた。

for-of文は配列のオブジェクトを扱っているから、
key valueとかないんですね。

ちょっと面白そうだな（どんな挙動をするのか知りたかった）と思ったので、以下のようなことをやってみました！
カレーのプログラムがこちら。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>for-ofの練習2</title>
</head>

<body>
  <script>
    var curry_index = [
      'potato',
      'carrot',
      'onion',
      'chicken or pork or beef or vegetable?',
    ]
    for (var ingredient of curry_index) {
      console.log(ingredient[0]);
    }
  </script>
</body>

</html>

これのコンソールがどうなってるのかと見てみると……
f:id:msm20-chocolateee:20181005154211p:plain

pcoc!!!! ㅋㅋㅋ

どうしてこの文字たちが出たのかというと、
プログラムのココ。
f:id:msm20-chocolateee:20181005154631p:plain

ingredient[0]　と書いています。
これは、書き換えると、変数[0]　になります。

私の学習上、プログラムでは事前に指定等していなかったら
0（ゼロ）から数を数えます。

配列の中身の「potato」の文字列を例にとりましょう。
通常、この文字数を数えると6になります。

しかし！

プログラムの場合はこのようになります。
f:id:msm20-chocolateee:20181005160009p:plain
見にくいかな～笑

0から数えるので、文字数は変わりませんが、
各文字につく数字は変わります。

今回は、ingredientの0番目を指定しましたので、
結果がそれぞれの文字列の一番はじめの文字が取れるようになっています。

「potato」だったら、「p」です。

「carrot」だと「c」
「onion」だと「o」
「chicken or pork or beef or vegetable?」だと「c」

プログラムは上から（順に）処理されていくので、
つなげると、「pcoc」になるというわけ。

なるほど。
あれですな、挙動は面白かったけど、
配列には指定しないほうがいいのかな？(笑)