web-dev-qa-db-ja.com

JavaScriptで2次元配列を作成する方法

私はオンラインで読んでいて、それが不可能であると言うところもあれば、そうであると言うところもあります。

  1. JavaScriptで2次元配列を宣言する方法を教えてください。 (可能であれば)

  2. どうやってそのメンバーにアクセスするの? (myArray[0][1]またはmyArray[0,1]?)

1016
Diego

var items = [
  [1, 2],
  [3, 4],
  [5, 6]
];
console.log(items[0][0]); // 1
console.log(items);

1132
Ballsacian1

単に配列内の各項目を配列にするだけです。

var x = new Array(10);

for (var i = 0; i < x.length; i++) {
  x[i] = new Array(3);
}

console.log(x);

389
Sufian

アクティバの答えと同様に、これはn次元配列を作成する関数です。

function createArray(length) {
    var arr = new Array(length || 0),
        i = length;

    if (arguments.length > 1) {
        var args = Array.prototype.slice.call(arguments, 1);
        while(i--) arr[length-1 - i] = createArray.apply(this, args);
    }

    return arr;
}

createArray();     // [] or new Array()

createArray(2);    // new Array(2)

createArray(3, 2); // [new Array(2),
                   //  new Array(2),
                   //  new Array(2)]
171
Matthew Crumley

Javascriptには1次元配列しかありませんが、他の人が指摘したように、配列の配列を作成することができます。

次の関数は、固定長の2次元配列を構築するために使用できます。

function Create2DArray(rows) {
  var arr = [];

  for (var i=0;i<rows;i++) {
     arr[i] = [];
  }

  return arr;
}

使用する前に配列のサイズを指定する必要がないため、列数はそれほど重要ではありません。

それからあなたはただ呼ぶことができます:

var arr = Create2DArray(100);

arr[50][2] = 5;
arr[70][5] = 7454;
// ...
75

最も簡単な方法:

var myArray = [[]];
65
Fred

それが不可能であると言う人がいる理由は、二次元配列が実際には配列の単なる配列だからです。ここでの他のコメントはJavaScriptで2次元配列を作成するための完全に有効な方法を提供しますが、最も純粋な観点はあなたがオブジェクトの1次元配列を持っているということです.

だから、それが相反する見方の原因です。 

42

Pushの使用を見せる人はほとんどいません。
何か新しいことをするために、行列を何らかの値で初期化する方法を示します。例:0または空の文字列 ""。
10要素の配列がある場合、JavaScriptでは最後のインデックスは9になります。

function matrix( rows, cols, defaultValue){

  var arr = [];

  // Creates all lines:
  for(var i=0; i < rows; i++){

      // Creates an empty line
      arr.Push([]);

      // Adds cols to the empty line:
      arr[i].Push( new Array(cols));

      for(var j=0; j < cols; j++){
        // Initializes:
        arr[i][j] = defaultValue;
      }
  }

return arr;
}

使用例 

x = matrix( 2 , 3,''); // 2 lines, 3 cols filled with empty string
y = matrix( 10, 5, 0);// 10 lines, 5 cols filled with 0
27
Sergio Abreu

ツーライナー:

var a = []; 
while(a.Push([]) < 10);

配列で埋められた長さ10の配列aを生成します。

24
domenukk

正直な答えはそうです

var nrows = ~~(Math.random() * 10);
var ncols = ~~(Math.random() * 10);
console.log(`rows:${nrows}`);
console.log(`cols:${ncols}`);
var matrix = new Array(nrows).fill(0).map(row => new Array(ncols).fill(0));
console.log(matrix);


Fillはシャローコピーコンストラクタを使用しているので、 直接 / fillを行に入れることはできません。したがって、すべての行は same memoryを共有します他の回答から引用)

// DON'T do this: each row in arr, is shared
var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo'; // also modifies arr[1][0]
console.info(arr);
21
Francesco Dondi

空の2次元配列(1行)を作成する方法

Array.from(Array(2), () => new Array(4))

図2および4はそれぞれ第1および第2の寸法である。

Array.from を使用しています。これは、配列のようなパラメータと各要素に対するオプションのマッピングを取ることができます。

Array.from(arrayLike [、mapFn [、thisArg]])

var arr = Array.from(Array(2), () => new Array(4));
arr[0][0] = 'foo';
console.info(arr);

同じトリックを使用することができます 1 ... Nを含むJavaScript配列を作成する - N


代わりに(しかし より非効率的n = 10,000で/ 12%)

Array(2).fill(null).map(() => Array(4))

パフォーマンスが低下するのは、.mapを実行するために最初のディメンション値を初期化する必要があるという事実によります。 Arrayは、.fillまたは直接値の割り当てを通じて注文するまで位置を割り当てません。

var arr = Array(2).fill(null).map(() => Array(4));
arr[0][0] = 'foo';
console.info(arr);


ファローアップ

なぜこれがうまくいかないのですか?

 Array(2).fill(Array(4));

これは明らかに望ましい2次元配列([ [ <4 empty items> ], [ <4 empty items> ] ])を返しますが、キャッチ:最初の次元配列は参照によってコピーされています。これはarr[0][0] = 'foo'が実際には1行ではなく2行を変更することを意味します。

var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo';
console.info(arr);
console.info(arr[0][0], arr[1][0]);

19
zurfyx

最も簡単な方法:

var arr  = [];

var arr1 = ['00','01'];
var arr2 = ['10','11'];
var arr3 = ['20','21'];

arr.Push(arr1);
arr.Push(arr2);
arr.Push(arr3);

alert(arr[0][1]); // '01'
alert(arr[1][1]); // '11'
alert(arr[2][0]); // '20'
16
Chicharito

これが私が達成したことです。

var appVar = [[]];
appVar[0][4] = "bineesh";
appVar[0][5] = "kumar";
console.log(appVar[0][4] + appVar[0][5]);
console.log(appVar);

これは私bineeshkumarを綴った 

16
Bineesh

二次元配列は、一次元配列と同じ方法で作成されます。そしてあなたはarray[0][1]のようにそれらにアクセスします。

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

alert (arr[2][1]); //alerts "4"
14
tj111

誰かがこれに答えたかどうか私にはわかりませんが、私はこれが私のためにかなりうまくいっているのを見つけました -

var array = [[,],[,]]

例えば: 

var a = [[1,2],[3,4]]

たとえば、2次元配列の場合 

11
Uchenna

Javaスクリプトで2D配列を作成するには、まず配列を作成してから、その要素として配列を追加します。このメソッドは、指定された行数と列数を持つ2D配列を返します。 

function Create2DArray(rows,columns) {
   var x = new Array(rows);
   for (var i = 0; i < rows; i++) {
       x[i] = new Array(columns);
   }
   return x;
}

配列を作成するには、以下のようにこのメソッドを使います。

var array = Create2DArray(10,20);
10
prime

配列の内包表記を使用する

JavaScript 1.7以降では、array comprehensionsを使って2次元配列を作成できます。配列を埋めながらエントリをフィルタリングしたり操作したりすることもできます。ループを使用する必要はありません。

var rows = [1, 2, 3];
var cols = ["a", "b", "c", "d"];

var grid = [ for (r of rows) [ for (c of cols) r+c ] ];

/* 
         grid = [
            ["1a","1b","1c","1d"],
            ["2a","2b","2c","2d"],
            ["3a","3b","3c","3d"]
         ]
*/

あなたが望むn x m配列を作成し、それをデフォルト値で満たすことができます。

var default = 0;  // your 2d array will be filled with this value
var n_dim = 2;
var m_dim = 7; 

var arr = [ for (n of Array(n_dim)) [ for (m of Array(m_dim) default ]] 
/* 
         arr = [
            [0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0],
         ]
*/

より多くの例とドキュメントは ここ にあります。

これはまだ標準機能ではありません _。

8
Tim Hallyburton

私のアプローチは@Bineeshの回答と非常によく似ていますが、より一般的なアプローチです。

次のようにdouble配列を宣言できます。

var myDoubleArray = [[]];

そして、以下の方法でコンテンツを保存しアクセスすること。

var testArray1 = [9,8]
var testArray2 = [3,5,7,9,10]
var testArray3 = {"test":123}
var index = 0;

myDoubleArray[index++] = testArray1;
myDoubleArray[index++] = testArray2;
myDoubleArray[index++] = testArray3;

console.log(myDoubleArray[0],myDoubleArray[1][3], myDoubleArray[2]['test'],) 

これは期待される出力を表示します

[ 9, 8 ] 9 123
7
Alexander

1人のライナーが好きな人のために Array.from()

// creates 8x8 array filed with "0"    
const arr2d = Array.from({ length: 8 }, () => Array.from({ length: 8 }, () => "0"));

別のもの(dmitry_romanovによるコメントから)を使用してください Array()。fill()

// creates 8x8 array filed with "0"    
const arr2d = Array(8).fill(0).map(() => Array(8).fill("0"));
7
my-

アドレス指定可能なすべてのインデックスと値をnullに設定して、スパースではない "2D"配列(x、y)を作成するには、次のようにします。

let 2Darray = new Array(x).fill(null).map(item =>(new Array(y).fill(null))) 

ボーナス "3D"配列(x、y、z)

let 3Darray = new Array(x).fill(null).map(item=>(new Array(y).fill(null)).map(item=>Array(z).fill(null)))

これに対する変更や修正は、この質問に対するコメントやさまざまな箇所で言及されていますが、実際の回答としてではないので、ここで追加します。

(他のほとんどの答えと同様に)これはO(x * y)時間の複雑さを持っているので、非常に大きな配列にはおそらく適していないことに注意してください。

6
Justin Ohms

以下で見つけたのが最も簡単な方法です。

var array1 = [[]];   
array1[0][100] = 5; 

alert(array1[0][100]);
alert(array1.length);
alert(array1[0].length);
5
GMsoF

これが私が2次元配列を作るための簡単な方法です。

function createArray(x, y) {
    return Array.apply(null, Array(x)).map(e => Array(y));
}

この機能をES5機能に簡単に変えることもできます。

function createArray(x, y) {
    return Array.apply(null, Array(x)).map(function(e) {
        return Array(y);
    });
}

なぜこれがうまくいくのかnew Array(n)コンストラクタはArray.prototypeのプロトタイプでオブジェクトを作成し、それからそのオブジェクトのlengthを代入します、その結果未実装の配列になります。実際のメンバーが不足しているため、Array.prototype.map関数を実行することはできません。

ただし、Array(1, 2, 3, 4)を実行する場合のように、コンストラクタに複数の引数を指定すると、コンストラクタはargumentsオブジェクトを使用してArrayオブジェクトを正しくインスタンス化し、データを設定します。

apply関数は引数をコンストラクターに展開するため、Array.apply(null, Array(x))を使用できます。わかりやすくするために、Array.apply(null, Array(3))を実行することはArray(null, null, null)を実行することと同じです。

実際に移入された配列を作成したので、あとはmapを呼び出して2番目の層(y)を作成するだけです。

4
dimiguel

Javascriptは2次元配列をサポートしていません。代わりに別の配列内に配列を格納し、その配列のどの位置にアクセスするかに応じてその配列からデータを取得します。配列の数え上げは _ zero _ で始まることを忘れないでください。

コード例:

/* Two dimensional array that's 5 x 5 

       C0 C1 C2 C3 C4 
    R0[1][1][1][1][1] 
    R1[1][1][1][1][1] 
    R2[1][1][1][1][1] 
    R3[1][1][1][1][1] 
    R4[1][1][1][1][1] 
*/

var row0 = [1,1,1,1,1],
    row1 = [1,1,1,1,1],
    row2 = [1,1,1,1,1],
    row3 = [1,1,1,1,1],
    row4 = [1,1,1,1,1];

var table = [row0,row1,row2,row3,row4];
console.log(table[0][0]); // Get the first item in the array
4
Rick

一つ下では、5x5の行列を作成し、それらをnullで埋めます。

var md = [];
for(var i=0; i<5; i++) {
    md.Push(new Array(5).fill(null));
}

console.log(md);

4
zeah

必要に応じて「レコード」を追加し、それらを更新してデータベースに送る前に必要な計算をすべて実行できるように、柔軟な配列関数を作成する必要がありました。これがコードです、助けになれば幸いです:)。

function Add2List(clmn1, clmn2, clmn3) {
    aColumns.Push(clmn1,clmn2,clmn3); // Creates array with "record"
    aLine.splice(aPos, 0,aColumns);  // Inserts new "record" at position aPos in main array
    aColumns = [];    // Resets temporary array
    aPos++ // Increments position not to overlap previous "records"
}

最適化したりバグを指摘してください:)

4
CJ Mendes

行の配列を割り当てることができます。各行は同じ長さの配列です。あるいは、rows * columns要素を持つ1次元配列を割り当て、行/列座標を要素インデックスにマッピングするメソッドを定義することもできます。

どちらの実装を選択しても、それをオブジェクトでラップする場合は、APIを使いやすくするためにプロトタイプでアクセサメソッドを定義できます。 

2
Nat

var playList = [
  ['I Did It My Way', 'Frank Sinatra'],
  ['Respect', 'Aretha Franklin'],
  ['Imagine', 'John Lennon'],
  ['Born to Run', 'Bruce Springsteen'],
  ['Louie Louie', 'The Kingsmen'],
  ['Maybellene', 'Chuck Berry']
];

function print(message) {
  document.write(message);
}

function printSongs( songs ) {
  var listHTML = '<ol>';
  for ( var i = 0; i < songs.length; i += 1) {
    listHTML += '<li>' + songs[i][0] + ' by ' + songs[i][1] + '</li>';
  }
  listHTML += '</ol>';
  print(listHTML);
}

printSongs(playList);

2
antelove

私はこのコードが私のために働くことがわかりました:

var map = [
    []
];

mapWidth = 50;
mapHeight = 50;
fillEmptyMap(map, mapWidth, mapHeight);

...

function fillEmptyMap(array, width, height) {
    for (var x = 0; x < width; x++) {
        array[x] = [];
        for (var y = 0; y < height; y++) {

            array[x][y] = [0];
        }
    }
}
2
Fabced

簡単な例:

var blocks = [];

blocks[0] = [];

blocks[0][0] = 7;
2
rickatech

0で埋められたm * n 2次元配列を作成するための1つのライナー。

new Array(m).fill(new Array(n).fill(0));
2
geniuscarrier

このように2次元配列を作成する関数を作成することもできます。

var myTable = [];

function createArray(myLength) {
    myTable = new Array(myLength);
    var cols, rows;
    for (cols = 0; cols < myLength; cols++) {
        myTable[cols] = new Array(myLength);
    }
}

次のようにして呼び出すことができます。これにより、10 x 10の2D配列が得られます。

createArray(10);

この方法で3D配列を作成することもできます。

1
Avishai Roi

多次元配列を作成するための再帰関数

var makeArray = function (dims, arr) {          
    if (dims[1] === undefined) {
        return new Array(dims[0]);
    }

    arr = new Array(dims[0]);

    for (var i=0; i<dims[0]; i++) {
        arr[i] = new Array(dims[1]);
        arr[i] = makeArray(dims.slice(1), arr[i]);
    }

    return arr;
}

2×3×4×2の4D-Arrayを構築します。

var array = makeArray([2, 3, 4, 2]);    
1
chessweb

多次元配列関数を作成するための Matthew Crumley の答えを修正しました。配列変数として渡す配列の次元を追加しました。多変数配列の最後の配列の要素の値を設定するために使用される別の変数valueがあります。

/*
*   Function to create an n-dimensional array
*
*   @param array dimensions
*   @param any type value
*
*   @return array array
 */
function createArray(dimensions, value) {
    // Create new array
    var array = new Array(dimensions[0] || 0);
    var i = dimensions[0];

    // If dimensions array's length is bigger than 1
    // we start creating arrays in the array elements with recursions
    // to achieve multidimensional array
    if (dimensions.length > 1) {
        // Remove the first value from the array
        var args = Array.prototype.slice.call(dimensions, 1);
        // For each index in the created array create a new array with recursion
        while(i--) {
            array[dimensions[0]-1 - i] = createArray(args, value);
        }
    // If there is only one element left in the dimensions array
    // assign value to each of the new array's elements if value is set as param
    } else {
        if (typeof value !== 'undefined') {
            while(i--) {
                array[dimensions[0]-1 - i] = value;
            }
        }
    }

    return array;
}

createArray([]);              // [] or new Array()

createArray([2], 'empty');    // ['empty', 'empty']

createArray([3, 2], 0);       // [[0, 0],
                              //  [0, 0],
                              //  [0, 0]]
1
Hristo Enev

もう1つの解決策があります。これは、2次元配列のサイズをあらかじめ定義しておくことを強制するものではなく、非常に簡潔です。

var table = {}
table[[1,2]] = 3 // Notice the double [[ and ]]
console.log(table[[1,2]]) // -> 3

これは、[1,2]が文字列に変換され、tableオブジェクトの 文字列キー として使用されるためです。

1
Oli

nodejs + lodash version: 

var _ = require("lodash");
var result = _.chunk(['a', 'b', 'c', 'd', 'e', 'f'], 2);
console.log(result);
console.log(result[2][0]);

出力:

[ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e', 'f' ] ]
e
0
mpiliszcz
Array.from({length: rows}).map(e => new Array(columns));
0
Error404
var _field = (function()
{
    var array = [];
    for(var y = 0; y != 3; y++) { array[y] = new Array(5); }
    return array;
})();

// var item = _field[2][4];
0
Martin Wantke

これはいくつかのコメントで言及されていますが、Array.fill()を使用すると2次元配列を構築するのに役立ちます。

function create2dArr(x,y) {
    var arr = [];
    for(var i = 0; i < y; i++) {
        arr.Push(Array(x).fill(0));
    }
    return arr; 
}

これにより、返される配列の長さがx、y倍の配列になります。

0
efong5

必要なのが4/4マトリックスだけであれば DOMMatrix を見れば、それは私が言うことができる使いやすいです、

let m = new DOMMatrix(); 
// m.m11, m.m12, m.m13, m.m14, ..., m.m41, m.m42, m.m43, m.m44

当初はさまざまな理由でもたらされたもので、node.jsでは利用できず、4×4に限定されています。

また、JSのために配列の代わりに自動活性化オブジェクトを使用することを検討できます。ここで my answerを見てください

var tree = () => new Proxy({}, { get: (target, name) => name in target ? target[name] : target[name] = tree() });

var t = tree();
t[0][2][3] = 4;
console.log(t[0][2][3]);

それは新しいJSを使用し、それを繰り返すときに正しく動作しませんので注意してください。

柔軟な多次元配列ジェネレータが必要な場合は、 this もご覧ください。

0
Ebrahim Byagowi

素晴らしいリポジトリ ここ 。 

  • api:masfufa.js

  • サンプル:masfufa.html 

このライブラリを理解するには、2つの例で十分です。 

例1

   /*     | 1 , 2 , 3 |
    * MX= | 4 , 5 , 6 |     Dimensions= 3 x 3
    *     | 7 , 8 , 9 |
    */ 


  jsdk.getAPI('my');
  var A=[1, 2, 3, 4, 5, 6, 7, 8, 9];
  var MX=myAPI.getInstance('masfufa',{data:A,dim:'3x3'});

その後: 

MX.get[0][0]  // -> 1 (first)
MX.get[2][2] //  ->9 (last)

例2

   /*      | 1 , 9 , 3 , 4 |
    * MXB= | 4 , 5 , 6 , 2 |     Dimensions= 2 x 4
    *   
    */ 

  var B=[1 , 9 , 3 , 4 , 4 , 5 , 6 , 2];
  var MXB=myAPI.getInstance('masfufa',{data:B,dim:'2x4'});

その後: 

MXB.get[0][0]  // -> 1 (first)
MXB.get[1][3] //  -> 2 (last)
MXB.get[1][2] //  -> 6 (before last)
0
Abdennour TOUMI

配列のサイズがわからない場合はどうなりますか?それとも、配列は動的に作成され移入されるべきですか?私のために働いた別の解決策は、配列内のインデックスが存在しない場合にそれを開始する静的な2次元配列変数を持つクラスを使用することです:

function _a(x,y,val){
    // return depending on parameters
    switch(arguments.length){
        case 0: return _a.a;
        case 1: return _a.a[x];
        case 2: return _a.a[x][y];
    }

    // declare array if wasn't declared yet
    if(typeof _a.a[x] == 'undefined')
        _a.a[x] = [];

    _a.a[x][y] = val;
}
// declare static empty variable
_a.a = [];

構文は次のようになります。

_a(1,1,2); // populates [1][1] with value 2
_a(1,1);   // 2 or alternative syntax _a.a[1][1]
_a(1);     // [undefined × 1, 2]
_a.a;      // [undefined × 1, Array[2]]
_a.a.length
0
NGix
 var items = [
      ["January 01", 42.5],
      ["February 01",  44.3],
      ["March 01",  28.7],
      ["April 01",  44.3],
      ["May 01",  22.9],
      ["June 01",  54.4],
      ["July 01",  69.3],
      ["August 01",  19.1],
      ["September 01",  82.5],
      ["October 01",  53.2],
      ["November 01",  75.9],
      ["December 01",  58.7]

    ];
  alert(items[1][0]); // February 01
  alert(items[5][1]); // 54.4
0
Juboraj Sarker

あなたがグーグルチャートのための2D配列の後であるならば、それをする最も良い方法はそれです 

var finalData = [];
[["key",value], ["2013-8-5", 13.5], ["2013-7-29",19.7]...]

を参照してください 無効な2次元配列のGoogleチャートではありません

0
Bishoy Hanna

これが私のMulti-Dimension Arrayの実装です。

このアプローチでは、1次元配列を作成しています

プロトタイプ関数multiArrayオブジェクトに追加しました。これを使用して任意の次元の配列を作成できます。

また、プロトタイプ関数indexArrayオブジェクトに追加しました。これを使用して、多次元インデックスから線形配列のインデックスを取得できます。

配列を作成する

//Equivalent to arr[I][J][K]..[] in C
var arr = new Array().multi(I,J,K,..);

任意のインデックスの配列値にアクセスする

//Equivalent in C arr[i][j][k];
var vaue = arr[arr.index(i,j,k)];

_スニペット_

/*
   Storing array as single dimension 
   and access using Array.index(i,j,k,...)
*/


Array.prototype.multi = function(){
 this.multi_size = arguments;
 this.multi_len = 1
 for(key in arguments) this.multi_len *=  arguments[key];
 for(var i=0;i<this.multi_len;i++) this.Push(0);
 return this;
}

Array.prototype.index = function(){
   var _size = this.multi_len;
   var temp = 1;
   var index = 0;
   for(key in arguments) {
      temp*=this.multi_size[key];
      index+=(arguments[key]*(_size/temp))
   }
   return index;
}

// Now you can use the multi dimension array
// A 3x3 2D Matrix

var arr2d = new Array().multi(3,3); // A 2D Array
arr2d[arr2d.index(1,1,1)]  = 5;
console.log(arr2d[arr2d.index(1,1,1)]);

// A 3x3x3 3D Matrix

var arr3d = new Array().multi(3,3,3); // a 3D Array
arr3d[arr3d.index(1,1,1)]  = 5;
console.log(arr3d[arr3d.index(1,1,1)]);

// A 4x3x3 4D Matrix
var arr4d = new Array().multi(4,3,3,3); // a 4D Array
arr4d[arr4d.index(4,0,0,1)]  = 5;
console.log(arr4d[arr4d.index(4,0,0,1)]);

0
Nadir Laskar