今回は連想配列のまとめ的な記事になります。表形式で表示してみます。

---

１　簡単な表にしてみる

HTML（一部）

<table border = 1>
    <tr>
        <th>英語</th><th>日本語</th>
    </tr>
    <script>
        let countries = {
        Spain:"スペイン",
        Italy:"イタリア",
        France:"フランス",
        Germany:"ドイツ",
        Belgium:"ベルギー"
        };
        for(let key in countries){
            document.write("<tr>");
            document.write("<td>" + key + "</td>");
            document.write("<td>" + countries[key] + "</td>");
            document.write("</tr>");
        }
    </script>
</table>

ブラウザ

　変数 countries に連想配列の形で値を代入し、それを for ～ in で取得して、表の形式で出力しています。
　なおループ内の最初の処理、つまり０番目のデータではつぎのようなコードが出力されることになります。

<tr>
    <td>Spain</td><td>スペイン</td>
</tr>

　これが表形式の１行目となります。

---

２　連想配列を操作した結果を表にしてみる

　連想配列を変更しそれを表にしてみます。

HTML（一部）

<p>変更前</p>
<table border = 1>
    <tr><th>キー</th><th>値</th></tr>
    <script>
        let person = {
        name:"さとう",
        age:30,
        address:"千代田区"
        };
        for(let key in person){
            document.write("<tr>");
            document.write("<td>" + key + "</td>");
            document.write("<td>" + person[key] + "</td>");
            document.write("</tr>");
    }
    </script>
</table>
<p>変更後</p>
<table border = 1>
    <tr><th>キー</th><th>値</th></tr>
    <script>
        person.name = "サトー";
        person.company = "○○商事";
        delete person.age;
        for(let key in person){
            document.write("<tr>");
            document.write("<td>" + key + "</td>");
            document.write("<td>" + person[key] + "</td>");
            document.write("</tr>");
        }
</script>
</table>

ブラウザ

　変更前と変更後とがそれぞれ出力されていますが、for ～ in の部分は全く同じで、１の例と同様な考え方です。

HTML（一部）

        let person = {
        name:"さとう",
        age:30,
        address:"千代田区"
        };

　この部分では変数 person にキー「name」「age」「address」を設定し、それぞれ値として「さとう」「30」「千代田区」を代入しています。

　そして、連想配列を操作している部分です。

HTML（一部）

        person.name = "サトー";
        person.company = "○○商事";
        delete person.age;

　まずキー「name」はすでに設定しているので、「さとう」から「サトー」へ値が変更されます。
　次にキー 「company」はありませんので、新たに「company : ○○商事」という項目を追加することになります。
　そして最後はキー「age」を削除するというものですので、この項目はなくなります。

ブラウザ

　したがって上記のような出力結果となります。
　変更前と変更後とを、よく比較していただければおわかりになると思います。

---

３　次回

　さて次回は「関数」です。表計算ソフトではおなじみのものですが、自分で作成することもできます。