JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptにおける1次元配列と多次元配列の違いと実装方法

JavaScriptで複数の値を扱う際、配列は最も基本的かつ重要なデータ構造の一つです。配列には大きく分けて1次元配列と多次元配列の2種類があります。

1次元配列とは

1次元配列は、値が一列に並んだシンプルなリスト構造です。数値や文字列などの要素を順番に格納します。

let arr = [1, 2, 3, 4, 5];

多次元配列とは

多次元配列は、配列の中にさらに配列を含む入れ子構造を持つ配列です。表形式のデータやマトリックスなど、より複雑なデータを表現するのに適しています。JavaScriptでは「配列の配列」を作成することで、多次元配列を実現できます。

let arr1 = [
   [1, 2, 3],
   ["A", "B", "C"],
   [5, "D", 6]
];

それでは、両者の違いを確認できる実際のコードを見てみましょう。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
       font-size: 18px;
       font-weight: 500;
       color: rebeccapurple;
    }
    .result {
       color: red;
    }
</style>
</head>
<body>
<h1>1次元配列 vs 多次元配列</h1>
<div class="sample">1次元配列<br /></div>
<div class="result">多次元配列<br /></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、1次元配列と多次元配列が表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let BtnEle = document.querySelector(".Btn");
    let arr = [1, 2, 3, 4, 5];
    let arr1 = [
       [1, 2, 3],
       ["A", "B", "C"],
       [5, "D", 6],
    ];
    BtnEle.addEventListener("click", () => {
       sampleEle.innerHTML += arr + "";
       arr1.forEach((item, index) => {
          resEle.innerHTML += "インデックス : " + index + " 配列 = " + item + "";
       });
    });
</script>
</body>
</html>

コードの解説

このコードでは、まずarrという変数に1次元配列[1, 2, 3, 4, 5]を代入し、arr1という変数に3つの配列を要素として持つ多次元配列を代入しています。

ボタンがクリックされると、1次元配列はそのまま表示されます。一方、多次元配列はforEach()メソッドを使って各要素（内側の配列）を取り出し、そのインデックス番号とともに表示します。これにより、多次元配列の各行が個別の配列として扱われていることがわかります。

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

JavaScriptにおける1次元配列と多次元配列の違いと実装方法

「クリックしてください」ボタンを押すと −

JavaScriptにおける1次元配列と多次元配列の違いと実装方法

まとめ

1次元配列は単一のリストとして値を管理するのに適しており、多次元配列は行と列を持つテーブル状のデータなど、階層的なデータ構造を扱う際に便利です。用途に応じて適切な配列の形を選択することで、より読みやすく保守性の高いコードを書くことができます。

  1. JavaScriptにおける配列の分割代入（Destructuring）の基本と使い方

    分割代入（Destructuring）とは、配列から値を取り出して個別の変数に展開するための構文です。ES2015（ES6）で導入されたこの機能を使うと、配列の各要素を簡潔かつ読みやすく変数に割り当てることができます。 配列の分割代入のサンプルコード 以下は、JavaScriptで配列の分割代入を行うコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport&quo

  2. C#の多次元配列とは？2次元配列の宣言方法と使い方を実例付きで解説

    C#では、多次元配列を扱うことができます。int型の2次元配列は、次のように宣言します。int[] a;多次元配列の中で最もシンプルな形式が2次元配列です。2次元配列とは、1次元配列を要素として持つ配列、すなわち「配列の配列」のような構造をイメージすると分かりやすいでしょう。例えば、次の図は3行4列の2次元配列を表しています。多次元配列の使用例ここからは、実際にC#で多次元配列を操作するサンプルコードを見ていきましょう。以下の例では、5行2列の2次元配列を宣言・初期化し、入れ子になったforループですべての要素を出力します。using System; namespace ArrayApplic