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 文により繰り返され、データを表形式で１０行分出力することになります。

３　次回

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

手習い日記帳

１　for ～ of 文

HTML

ブラウザ

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

HTML

HTML（コードの一部）

ブラウザ

HTML（コードの一部）

３　次回

カテゴリー

更新記事

タグ

JavaScript で配列 ４

１ for ～ of 文

HTML

ブラウザ

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

HTML

HTML（コードの一部）

ブラウザ

HTML（コードの一部）

３ 次回

カテゴリー

更新記事

タグ

JavaScript で配列４

１　for ～ of 文

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

３　次回