Zenn
🐷

[Javascript]配列 | 多次元配列 | 連想配列

2024/09/16に公開
JavaScript
プログラミング
配列
連想配列
tech

本記事を読み終わった時のゴール

  • 配列の概念を理解できる事
  • 配列の使い方をイメージできる事
     

コレクションとは?

  • 広義の意味だと複数の要素を格納できる複合的なデータ構造のこと。
    コレクションの種類として配列が存在する。

配列

  • 複数のデータを連続的に並べたデータ構造。
    通常は1つの変数につき1つの値が存在するが、配列を使用する事で1つの変数で値を複数定義する事が出来る。
    配列のパーツとして以下がある。

要素とは？

  • 配列に入っている個々のデータ

添え字(インデックス)

  • 配列の各要素に振られる番号

配列の長さ

  • 配列の要素数

配列の書き方

let {変数名} = ["値1","値2","値3"]


let fruits = ["apple","banana","orange"]
// fruits[0] = "apple"
// fruits[1] = "banana"
// fruits[2] = "orange"


let fruits = ["apple","banana","orange"]

concole.log(fruits);
// 配列で指定した全ての要素が返ってくる。

ちなみに、lengthプロパティを使用すると配列の要素数を返す。

console.log(fruits.length)
// 配列で指定した要素数を返す
// 3
  • for~of
    配列から値を取得する事に特化したfor文
let fruits = ["apple","banana","orange"]

for(let name of fruits){
    document.write(`<li>${name}<li>`)
}
// for~ofを使用する事で配列の各要素に対して変数nameを割り当てるため、<li>形式で配列の各要素が表示される。

配列の操作

モデルになる変数

let animals = ["dog","cat","bird"]
  • 先頭に要素を追加する
animals.unshift("tiger");
//  ["tiger","dog","cat","bird"]
  • 末尾に要素を追加する
animals.push("tiger")
//  ["dog","cat","bird","tiger"]
  • 先頭の要素を除外する
animals.shift();
//  ["cat","bird"]
  • 末尾の要素を除外する
animals.pop();
// ["dog","cat",]

文字列だけでなく、数値を指定する事もできる

let last_three_years = [2022,2023,2024]

多次元配列

  • 配列の中に配列を入れるデータ構造。
    ２次元、３次元と配列を入れ子状態で定義する事が出来る。

以下は２次元配列

let employee = [
    //["名字",年齢,"勤務地"]
    ["加藤",56," 愛知"], // enployee[0]
    ["田中",26,"東京"], // enployee[1]
    ["高橋",65,"沖縄"] // enployee[2]
]
  • 2次元配列はforの2重ループで展開する事が出来る
for(let i = 0 ; i < employee.length; i++){
    document.write("<li>"+employee[i]+"</li>")
}
// 加藤,56, 愛知
// 田中,26,東京
// 高橋,65,沖縄
  • 3次元の配列
let employee = [
    // 2次元配列から「勤務年数」と「スキルセット」を追加
    [
        ["加藤", 56, "愛知"], // employee[0][0]: 基本情報
        [25, ["管理", "営業"]] // employee[0][1]: 勤務年数とスキルセット
    ],
    [
        ["田中", 26, "東京"], // employee[1][0]
        [3, ["エンジニア", "営業"]] // employee[1][1]
    ],
    [
        ["高橋", 65, "沖縄"], // employee[2][0]
        [40, ["経理", "人事"]] // employee[2][1]
    ]
];

// 例: 高橋さんのスキルセットにアクセスする
console.log(employee[2][1][1]);  // 出力: ["経理", "人事"]

連想配列とは？

  • 配列と違い添え字(インデックス)ではなく、キーバリュー形式で要素を管理するデータ構造。
let fruts = {apple:"りんご",banana:"バナナ",orange:"オレンジ"}

console.log(fruits.banana);
// 出力:バナナ　※こちらの書き方の方がシンプル
console.log(fruits.["banana"]);
// 出力:バナナ
console.log(fruits);
// 出力:{apple:'りんご',banana='バナナ',orange='オレンジ'}
  • 上記の例で連想配列の内容を変更する方法
fruits.apple="林檎";
// "りんご"→"林檎"

fruits.grape="ぶどう";
// grape:"ぶどう"追加される

delete.fruits.apple;
// 「apple:"りんご"」が削除される
  • for文と連想配列の組み合わせ
associative_array.js
let high_gdp_countries = {
    USA:"アメリカ合衆国",
    China:"中華人民共和国",
    Germany:"ドイツ",
    Japan:"日本",
}

for(let k in countries_with_high_GDP){
    document.write("<tr>");
    document.write(`<td>${k}</td>`);
    document.write(`<td>${high_gdp_countries[k]}</td>`);
}
high_gdp_countries.html
<!DOCTYPE html>
<html>
<head>
    <title>
        表
    </title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>
        for,連想配列
    </h1> <!-- 本来、テーブルの設定はCSSで書くのが推奨のようです--->
    <table border="1" style="border-collapse:collapse">
        <tr>
            <th>英語の国名</th><th>日本語の国名</th>
    <script src="./associative_array.js"></script>
</body>
</html>

実行結果


 

  • 連想配列,配列を組み合わせたコード
jtc_top_sier.js
let jtc_top_sier = [
    {
        company:"NTTデータ",
        URL:"https://www.nttdata.com/jp/ja/"
    },
    {
        company:"富士通",
        URL:"https://global.fujitsu/ja-jp/"
    },
    {
        company:"日立製作所",
        URL:"https://www.hitachi.co.jp/"
    },
    {
        company:"NRI",
        URL:"https://www.nri.com/jp"
    },
]

let urlkey = "URL"

for( let item  of jtc_top_sier ){
    // 配列の各要素を反復処理

    document.write(`<tr>`);
    // 各反復で、<tr>タグを開始し、テーブルの新しい行を開始
    
    for(let k in item  ){
    // 内側のループで、各オブジェクトごとに全てのキー（company,URL）を反復処理する
        
        let data = item[k];
        // オブジェクトの各キーに対応する値を取得

        if(k === urlkey){
            data = `<a href= "${data}">${data}</a>`;
        }
        // もしキーが urlkey("URL")の場合、その値（URL）をアンカータグ（<a>）に包み、リンクとして機能する
        // これにより、テーブルのセル内にリンクが表示される
        
        document.write(`<td>${data}</td>`);
       // キーが URL でない場合（companyの場合）、その値はテーブルデータセル（<td>）内にテキストとして表示される

    }
    
    document.write(`</tr>`);
    // 全てのキーを処理した後、</tr>タグを使用してテーブル行を閉じる
}
jtc_top_sier.html
<!DOCTYPE html>
<html>
<head>
    <title>
        国内のトップSI企業
    </title>
    <meta charset="UTF-8">
</head>

<body>
    <h1>
        for,連想配列,配列
    </h1>
    <table border="1" style="border-collapse:collapse">
        <tr>
            <th>企業名</th><th>URL</th>
    <script src="./jtc_top_sier.js"></script>
</body>
</html>

実行結果

参考

https://book.impress.co.jp/books/1122101168

GitHubで編集を提案

Discussion