JavaScript で配列４

　今回は多次元配列の復習をかねて、for ～ of 文を学びます。これは配列からの値の取得に特化したものです。

１　for ～ of 文

　まずは書式です。

書式

for ( 変数 of 配列 ) {
    処理
}

　これは配列から要素を取り出して、変数に代入して何らかの処理を繰り返すものです。

　簡単な例を見てみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>for ～ of 文</title>
<meta charset="UTF-8">
</head>
<body>
<ul>

<script>
    let sw = ["新たなる希望", "帝国の逆襲", "ジェダイの帰還"];
    for(let title of sw){
        document.write("<li>" + title + "</li>");
    }
</script>

</ul>
</body>
</html>

ブラウザ

for ～ of 文

　とてもシンプルですね。
　まず、変数 sw を宣言し、配列として要素を記述します。
　そして for ～ of 文で、変数 sw から順番に要素を取り出して変数 title に代入、次いでdocument.write を実行、それを要素がなくなるまで繰り返します。
　write メソッドの対象が title であるため、各要素がリスト形式で出力されたのです。

２　for ～ of 文を多次元配列に

　前回学んだ多次元配列を表形式で出力するのに、for ～ of 文を使用してみましょう。

　前回のコードを示します。
　なお、順位の部分は説明が煩雑になるので省略しています。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
<title>多次元配列の要素をテーブル形式で表示</title>
<meta charset="UTF-8">
<style type="text/css">
    td { text-align: center; }
</style>
</head>
<body>

<table border = "1">

<tr>
    <th>市・区</th><th>人口（万人）</th><th>都道府県</th>
</tr>

<script>
    let ppl = [
        ["特別区", 979, "東京都"],
        ["横浜市", 376, "神奈川県"],
        ["大阪市", 277, "大阪府"],
        ["名古屋市", 232, "愛知県"],
        ["札幌市", 195, "北海道"],
        ["福岡市", 164, "福岡県"],
        ["川崎市", 154, "神奈川県"],
        ["神戸市", 149, "兵庫県"],
        ["京都市", 143, "京都府"],
        ["さいたま市", 134, "埼玉県"]
    ];

    for(let i = 0; i < ppl.length; i++){
        document.write("<tr>");
        for(let j = 0; j < ppl[i].length; j++){
            document.write("<td>" + ppl[i][j] + "</td>");
        }
        document.write("</tr>");
    }
</script>

</table>

</body>
</html>

　これを for ～ of 文をつかったコードに置き換えてみます。

HTML（コードの一部）

    for(let ppl_i of ppl){
        document.write("<tr>");
        for(let ppl_j of ppl_i){
            document.write("<td>" + ppl_j + "</td>");
        }
        document.write("</tr>");
    }

　なお、これは for 文の部分のみです。

ブラウザ

多次元配列の要素をテーブル形式で表示

市・区	人口（万人）	都道府県

　同じように表示できました。

　説明のため、<tr> と </tr> を出力する部分を省略してみます。

HTML（コードの一部）

    for(let ppl_i of ppl){　①

        for(let ppl_j of ppl_i){　②
            document.write("<td>" + ppl_j + "</td>");
        }

    }

　ここでは、新たに変数 ppl_i と変数 ppl_j を用意しています。

　まず ① 外側の for ～ of 文の１巡目において、変数 ppl からその要素である配列「特別区, 979, 東京都」が取り出され、変数 ppl_i に代入されます。
　次に ② 内側の for ～ of 文の１巡目において、変数 ppl_i からその要素である「特別区」が取り出され、変数 ppl_j に代入されます。最後にその変数 ppl_j が出力され、「特別区」と表示されます。

　そして、② 内側の for ～ of 文で繰り返し処理が行われ、変数 ppl_j に順次「979」「特別区」が代入され、出力されます。
　そのデータはそれぞれ、<td> と </td> に囲まれていて、さらにこの３つのデータは <tr> と </tr> に囲まれているため、表形式の行となって出力されるわけです。

　さらにこのプロセスが、 ① 外側の for ～ of 文により繰り返され、データを表形式で１０行分出力することになります。

３　次回

　前回が複雑だった分、今回は復習をかねて簡単にしてみました。次回は、コレクションの一つである「連想配列」に挑戦します。

更新記事

『会社四季報 2024年 3集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

１　for ～ of 文

HTML

ブラウザ

２　for ～ of 文を多次元配列に

HTML

HTML（コードの一部）

ブラウザ

HTML（コードの一部）

３　次回

カテゴリー

更新記事

タグ

JavaScript で配列 ４

１ for ～ of 文

HTML

ブラウザ

２ for ～ of 文を多次元配列に

HTML

HTML（コードの一部）

ブラウザ

HTML（コードの一部）

３ 次回

カテゴリー

更新記事

タグ

JavaScript で配列４

１　for ～ of 文

２　for ～ of 文を多次元配列に

３　次回