JavaScript で配列 2

 多次元配列という形式を理解します。今回は、いわゆる表の形でデータを表示するための基礎的な知識です。


1 準備

 JavaScript ではなく HTML の学習になりますが、最初にリストとテーブルについて確認します。
 まずはリストです。これはいわゆる「箇条書き」の形式です。

書式

 最初に <ul> でリストの始まりを示し、そのリストの終了を </ul> で指定します。
 そして、各々の項目は、<li></li> との間に記述します。

具体的な例を見ていきましょう。

リスト
  • 北海道
  • 青森県
  • 岩手県

 リスト形式で表示されました。

 なお、<ul> を <ol> とすると番号付きで表示されます。

リスト
  1. 北海道
  2. 青森県
  3. 岩手県

 次はテーブルです。

書式

 テーブル自体は <table> と </table> との間に記述します。
 項目名は <th> と </th> との間に、内容は <td> と </td> との間に置きます。
 また、表の「行」にあたる部分は、先頭に <tr>、末尾に </tr> を置いて囲う必要があります。

テーブル
都道府県名面積(km)人口(万人)
北海道83424522
青森県9646123
岩手県15275121

 改善すべき要素はあるものの、単に項目を並べるよりもこのほうが見やすくなったのではないでしょうか?


2 多次元配列のしくみ

 JavaScript に戻ります。
 多次元配列というものがあり、たとえば2次元のものであれば、わかりやすい表形式の形式で表示することができます。
 簡単な例を見てみましょう。

 直感的におわかりになると思いますが、まず最初に変数 ppl の宣言をして を置きます。
 そのなかに各要素を配列の形で配置し、最後に で多次元配列の末尾を示しています。
 配列の要素として、さらに配列が記述されている形ですね。

 次にこの多次元配列から要素を取り出してみましょう。
 まず、変数 ppl の中身をすべて出力してみます。

多次元配列

 やはりわかりにくいですね。

 そこで、ある1行のみを取り出してみます。
 配列のうち、個別の要素を取り出すには、添え字を使うのでしたね。

多次元配列

 多次元配列うち2番目(ただし添え字は「1」)の配列が出力されました。
 表の形式でいえば2行目のデータです。

 次に、配列のなかから 各要素を取り出してみましょう。

多次元配列

 このように添え字を2段階で使います。
 2番目の配列のうち、それぞれ0番目、1番目及び2番目の要素がそれぞれ出力されています。
 表の形式でいえば、3行目のうち1列目、2列目及び3列目のデータとなります。

 最後に2次元配列の長さ(配列の数)を確認します。

多次元配列

 この2次元配列のなかに10の配列があるということですね。

 さらに各配列の中の長さ(要素の数)を確認します。
 前回学習した繰り返し処理を使ってみます。

多次元配列

 2次元配列のなかにある、配列の要素の数はすべて「3」であることが分かりました。
 なお、繰り返し条件の判定に i < ppl.length と記述されていますが、これは変数 i が2次元配列のなかの配列の数 ppl.length より小さい間はループ処理を続けるということ、つまり、変数 ippl.length 以上になったらこのループを抜けるというものです。
 したがって、変数 i の値が「10」になった時点、つまり document.write を10回実行した後にループを抜けます。
 念のためいうと、変数 i の値が「0」から「9」のときに document.write が実行されたということです。
 そして、write メソッドの内容は ppl[i] の長さを length プロパティを使って取得するというものですので、結果的に各配列の要素の数「3」が合計10回表示されました。


3 次回

 さて次回は、今回学んだ知識をもとに、上記2の冒頭にあるデータを表形式で表示することにチャレンジします。

カテゴリー

更新記事

タグ

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: