初めに

ES6に導入されたfor of文について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

for of文の練習

まず、bagsというobjectを用意します。

"use strict";

const bags = {
  fruits: ["apple", "orange", "grape", "mango", "banana"],
  stationery: ["pencil", "eraser", "marker", "ruler", "ballpoint pen"],
};

スプレッド構文を使ってbagsのfruitsとstationeryプロパティーの中身をitemsに代入します。

const items = [...bags.fruits, ...bags.stationery];

コンソールで中身を確認してみます。

console.log(items);

配列という形でオブジェクトの中身を取得できました。

itemsをfor of文を使って、配列の中身を出力してみます。itemの型はstringになっていることが分かります。

for (const item of items) {
  console.log(item, typeof item);
}

しかし、このままだとindexが表示されず、配列の中身だけ出力されてしまいます。この問題を解決するため、MDNの公式ドキュメントを参考にentriesメソッドを使ってみることに。

for (const item of items.entries()) {
  console.log(item);
}

entriesメソッドを使うと、itemsのindexとvalueという形で出力されました。

entriesメソッドについて調べてみたいと思ったので、items.entriesをコンソルーで表示してみました。

console.log(items.entries());

配列の反復子(iterator)と出ました。

配列であることが分かったので、スプレッド構文を使って展開してみます。

console.log([...items.entries()]);

items.entriesが一つの配列であり、その中にそれぞれのitemが配列の形でindexとvalueとして格納されていることが分かります。

このそれぞれの配列の0番目にはindexが入っていて、1番目にはvalueが格納されているので、次のように0番目のindexに+1を足し、1から始まるようにし、1番目の中身を出力してみました。

for (const item of items.entries()) {
  console.log(`${item[0] + 1}: ${item[1]}`);
}

entriesの中身が1番から表示されました。

このやり方は古いので、分割代入を使って書き替えてみました。menu.entries()が配列構造なので有効な方法です。

for (const [i, element] of items.entries()) {
    console.log(`${i + 1}: ${element}`);
  }

結果は先と同じです。

これでentries()メソッドを使うと中身は添字と値が入っている配列であることが分かりました。

【Javascript】for of ー学習ノート

初めに

for of文の練習

参考サイト

【Javascript】for of ー 学習ノート

初めに

for of文の練習

参考サイト

【Javascript】for of ー学習ノート