JavaScript で配列 4

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


1 for ~ of 文

 まずは 書式です。

書式

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

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

for ~ of 文

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


2 for ~ of 文を多次元配列に

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

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

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

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

多次元配列の要素をテーブル形式で表示
市・区人口(万人)都道府県

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

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

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

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

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

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


3 次回

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

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (8) コーチング (1) チーズ (2) ネズミ (2) ノート (2) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (6) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (8) IGS (8) Kラーニング (1)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]
価格:2,728円(税込、送料無料) (2024/2/16時点)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

1冊ですべて身につくJavaScript入門講座 [ Mana ]
価格:2,794円(税込、送料無料) (2024/2/23時点)



Categories: