今回は多次元配列の復習をかねて、for ~ of 文を学びます。これは配列からの値の取得に特化したものです。
1 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>
ブラウザ
とてもシンプルですね。
まず、変数 sw を宣言し、配列として要素を記述します。
そして for ~ of 文で、変数 sw から順番に要素を取り出して変数 title に代入、次いでdocument.write を実行、それを要素がなくなるまで繰り返します。
write メソッドの対象が title であるため、各要素がリスト形式で出力されたのです。
2 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 文の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 次回
前回が複雑だった分、今回は復習をかねて簡単にしてみました。次回は、コレクションの一つである「連想配列」に挑戦します。
カテゴリー
更新記事
- 『日本経済新聞』を読む28(しそ、SOX指数、体験型、オリーブ、クラフトビール)
- 『日本経済新聞』を読む27(ATM、Z世代、SSD、イチゴ、稲わら)
- 『日本経済新聞』を読む26(イワシ、合成ダイヤモンド、陸上養殖、希望退職、タコ)
- 『日本経済新聞』を読む25(モルドバ、スマートロック、バリ、二重価格、ニッチ)
- 『日本経済新聞』を読む24(FTS、焼酎、化粧水、防災ビジネス、一太郎)
- 『日本経済新聞』を読む23(人工芝、睡眠市場、東海道新幹線、地雷、酸化ガリウム)
- 『日本経済新聞』を読む22(ポータブル電源、ズワイガニ、モルディブ、リチウム、ロブスター)
- 『日本経済新聞』を読む21(高速船、駄菓子、レンタル自習室、PFAS、戻りガツオ)
- 『日本経済新聞』を読む20(書店、コネクテッドカー、アゼルバイジャン、アルメニア、服薬)
- 『日本経済新聞』を読む 19(アボカド、飼料、ビレット、電動キックボード、フレア)
- テーマ株投資(9か月)
- 『日本経済新聞』を読む 18(背徳、デフリ、シアヌークビル港、デジタルノマド、企業博物館)
- 『日本経済新聞』を読む 17(在庫、字幕、梅田、エクセル職人、耐震シェルター)
- 『日本経済新聞』を読む 16(初任給、ウイスキー、スリランカ、クジラ肉、宇宙ごみ)
- 『日本経済新聞』を読む 15(配当貴族、スマートウォッチ、底引き網、ねこ住宅、電池の冷却)
- 『日本経済新聞』を読む 14(サービス収支、つながらない、租税回避地、電池寿命、置き社食)
- 『日本経済新聞』を読む 13(鉄鉱石、内需株、画像診断、ハブ空港、LCC)
- 『日本経済新聞』を読む 12(アンチモニー、おもちゃショー、スタートアップ、燃料電池、送電)
- 『日本経済新聞』を読む 11(にがり、おせち、ダチョウ、災害ドローン、ビジネスホテル)
- 『日本経済新聞』を読む 10(航空エンジン、金型、国際会議、PCE、ゲーム機)
- 『日本経済新聞』を読む 9(家計金融資産、車載半導体、ホタテ、コンテナ、GPU)
- 『日本経済新聞』を読む 8(北陸新幹線、車中泊、ジョブ型、GPIF、メタンハイドレート)
- 『日本経済新聞』を読む 7(紙、ラストワンマイル、リユース市場、カード審査、ボルダリング)
- 『日本経済新聞』を読む 6(iPS細胞、騰落レシオ、短期プラ、REIT、フードテック)
- 『日本経済新聞』を読む 5(ナフサ、ビール、輸入牛肉、悪玉コレステロール、核融合)
- 『日本経済新聞』を読む 4(ダビンチ・サージカル・システム、ゼロエミッション船、クッキー、LBO、洋上風力発電)
- 『日本経済新聞』を読む 3(変動金利、HSP、スリープテック、双腕ロボット、物流パレット)
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
- JavaScript でオブジェクト 2
- JavaScript でオブジェクト 1
- JavaScript で関数 3
- JavaScript で関数 2
- JavaScript で関数 1
- JavaScript で配列 6
- JavaScript で配列 5
- JavaScript で配列 4
- テーマ株投資(3カ月目)
- JavaScript で配列 3
- JavaScript で配列 2
- JavaScript で配列 1
- JavaScript で「繰り返し」2
- 『チーズはどこへ消えた?』を読む 2
- 『チーズはどこへ消えた?』を読む 1
- JavaScript で「繰り返し」1
- JavaScript で「もし」3
- テーマ株投資(2カ月目)
- JavaScript で「もし」2
- 「記憶」本 5冊を読む 3
- 「記憶」本 5冊を読む 2
- 「記憶」本 5冊を読む 1
- テーマ株投資(1カ月半)
- 「睡眠」本 6冊を読む3(夜間・朝の行動)
- 「睡眠」本 6冊を読む2(昼間の行動)
- テーマ株投資(1か月目)
- JavaScript で「もし」1
- JavaScript で変数3
- 「睡眠」本 6冊を読む1(理論)
- JavaScript で変数2
- テーマ株投資(第3週目)
- JavaScript でヘンな数
- 「メモ」本 6冊を読む2(メモの方法)
- テーマ株投資(第2週目)
- JavaScript で足し算
- 「メモ」本 6冊を読む1(メモの意義)
- テーマ株投資(第1週目)
- JavaScript で「こんにちは世界」
- 「コーチング」本 6冊を読む
- はじめてのテーマ株投資
- JavaScript とは
- 「怒り」「アンガーマネジメント」本 7冊を読む
- JavaScript を始めてみる
タグ
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) ことば (28) アンガーマネジメント (1) インソース (1) ココナラ (12) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (4) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (3) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 新聞 (2) 株式 (30) 用語 (19) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (12) IGS (12) Kラーニング (1)