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

JavaScriptで2次元配列を作成する方法をわかりやすく解説

2次元配列とは、表のような「行と列」の構造を持つ配列のことです。各要素には myarray[0][0] や myarray[0][1] のように、2つのインデックス（行番号と列番号）を指定してアクセスします。

2次元配列の基本的な作成手順

JavaScriptでは、まず外側となる配列を作成し、その各要素に対してさらに新しい配列を代入することで、2次元配列を実現できます。以下は、3×3の2次元配列を作成し、値を代入して表示するサンプルコードです。

サンプルコード

<html>
   <body>
      <script>
         // 外側の配列を3要素で作成
         var myarray = new Array(3);

         // 各要素に新しい配列を代入して2次元化
         for (i = 0; i < 3; i++) {
            myarray[i] = new Array(3);
         }

         // 値を代入
         myarray[0][0] = "One";
         myarray[0][1] = "Two";
         myarray[0][2] = "Three";
         myarray[1][0] = "Four";
         myarray[1][1] = "Five";
         myarray[1][2] = "Six";
         myarray[2][0] = "Seven";
         myarray[2][1] = "Eight";
         myarray[2][2] = "Nine";

         // [2][0] の要素を表示
         document.write(myarray[2][0]);
      </script>
   </body>
</html>

出力結果

Seven

このコードでは、new Array(3) で長さ3の配列を生成し、for ループによってその各要素に新たな配列を代入しています。これにより、myarray[行][列] の形式でアクセスできる2次元配列が完成します。最後に myarray[2][0] を参照しているため、「Seven」が出力されます。

より現代的な書き方

近年のJavaScriptでは、Array.from() を使うことで、ループ処理を書かずに簡潔に2次元配列を初期化できます。

// 3×3の2次元配列を一括生成
const myarray = Array.from({ length: 3 }, () => new Array(3));

// 値を代入
myarray[0][0] = "One";
myarray[2][0] = "Seven";

console.log(myarray[2][0]); // "Seven"

また、初期値をまとめて設定したい場合は、以下のように fill() と組み合わせる方法もあります。

const matrix = Array.from({ length: 3 }, () => Array(3).fill(0));
console.log(matrix); // [[0,0,0],[0,0,0],[0,0,0]]

注意点

古いコード例でよく使われる document.write() は現在非推奨とされているため、実際の開発では console.log() を使ってデバッグするのがおすすめです。また、Array.prototype.fill() でオブジェクトや配列を直接埋めると全要素が同じ参照を共有するため、2次元配列を作る際は上記のように Array.from() と組み合わせるのが安全です。

  1. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ

  2. JavaScriptで2つのオブジェクトをマージする方法を解説

    JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev