Czytałem online i niektóre miejsca mówią, że nie jest to możliwe, niektóre twierdzą, że tak, a następnie podają przykład, a inne odrzucają przykład itp.

1. Jak zadeklarować dwuwymiarową tablicę w JavaScript? (zakładając, że to możliwe)

2. Jak mam uzyskać dostęp do jego członków? ( myArray[0][1]lub myArray[0,1]?)

Po prostu każdy element w tablicy jest tablicą.

var x = new Array(10);

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

console.log(x);

Podobnie do odpowiedzi Activy, oto funkcja służąca do tworzenia tablicy n-wymiarowej:

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)]

JavaScript ma tylko tablice jednowymiarowe, ale możesz budować tablice tablic, jak zauważyli inni.

Poniższej funkcji można użyć do skonstruowania tablicy 2-wymiarowej o stałych wymiarach:

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

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

  return arr;
}

Liczba kolumn nie jest tak naprawdę ważna, ponieważ nie jest wymagane określenie rozmiaru tablicy przed użyciem.

Następnie możesz po prostu zadzwonić:

var arr = Create2DArray(100);

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

Najłatwiejszy sposób:

var myArray = [[]];

Jak utworzyć pustą tablicę dwuwymiarową (jednowierszowa)

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

2 i 4 oznaczają odpowiednio pierwszy i drugi wymiar.

Wykorzystujemy Array.from, który może przyjąć tablicowy parametr i opcjonalne mapowanie dla każdego elementu.

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

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

Tej samej sztuczki można użyć do utworzenia tablicy JavaScript zawierającej 1 ... N

Alternatywnie (ale bardziej nieefektywne 12% z n = 10,000)

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

Spadek wydajności wiąże się z faktem, że do uruchomienia musimy zainicjować wartości pierwszego wymiaru .map. Pamiętaj, że Arraynie przydzieli pozycji, dopóki nie zamówisz go poprzez .fillbezpośrednie przypisanie wartości.

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

Zagryźć

Oto metoda, która wydaje się poprawna, ale ma problemy .

 Array(2).fill(Array(4)); // BAD! Rows are copied by reference

Chociaż zwraca pozornie pożądaną tablicę dwuwymiarową ( [ [ <4 empty items> ], [ <4 empty items> ] ]), istnieje tablica catch: pierwszy wymiar został skopiowany przez odniesienie. Oznacza to, arr[0][0] = 'foo'że faktycznie zmieniłby dwa rzędy zamiast jednego.

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

Niektórzy twierdzą, że nie jest to możliwe, ponieważ tablica dwuwymiarowa jest tak naprawdę tablicą tablic. Pozostałe komentarze tutaj zapewniają doskonale poprawne metody tworzenia dwuwymiarowych tablic w JavaScript, ale najczystszym punktem widzenia byłoby posiadanie jednowymiarowej tablicy obiektów, każdy z tych obiektów byłby jednowymiarową tablicą składającą się z dwóch elementów.

To jest przyczyną sprzecznych punktów widzenia.

Niewiele osób pokazuje użycie push:
Aby wprowadzić coś nowego, pokażę ci, jak zainicjować macierz z pewną wartością, na przykład: 0 lub pusty ciąg „”.
Przypominając, że jeśli masz tablicę 10 elementów, w javascript ostatni indeks będzie wynosił 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;
}

przykłady użycia:

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

Dwuwarstwowy:

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

Wygeneruje tablicę o długości 10, wypełnioną tablicami. (Push dodaje element do tablicy i zwraca nową długość)

Najczystsza odpowiedź wydaje się być

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);

Zauważ, że nie możemy bezpośrednio wypełnić wierszy, ponieważ fill używa konstruktora płytkiej kopii, dlatego wszystkie wiersze będą miały tę samą pamięć ... oto przykład, który pokazuje, w jaki sposób każdy wiersz byłby współdzielony (wzięty z innych odpowiedzi):

// 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);

Najłatwiejszy sposób:

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'

Oto co osiągnąłem:

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

To przeliterowało mnie bineeshkumar

Tablice dwuwymiarowe są tworzone w taki sam sposób, jak tablice jednowymiarowe. I masz do nich dostęp jak array[0][1].

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

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

Nie jestem pewien, czy ktoś na to odpowiedział, ale uznałem, że zadziałało to całkiem nieźle -

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

na przykład:

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

Na przykład dla tablicy dwuwymiarowej.

Aby utworzyć tablicę 2D w javaScript, możemy najpierw utworzyć tablicę, a następnie dodać tablice jako elementy. Ta metoda zwróci tablicę 2D z podaną liczbą wierszy i kolumn.

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

aby utworzyć tablicę, użyj tej metody jak poniżej.

var array = Create2DArray(10,20);

Aby utworzyć nieskomplikowaną tablicę „2D” (x, y) ze wszystkimi adresowalnymi indeksami i ustawionymi wartościami null:

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

dodatkowa tablica „3D” (x, y, z)

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

Odmiany i poprawki na ten temat zostały wspomniane w komentarzach i w różnych punktach w odpowiedzi na to pytanie, ale nie jako rzeczywista odpowiedź, dlatego dodam ją tutaj.

Należy zauważyć, że (podobnie jak większość innych odpowiedzi) ma złożoność czasową O (x * y), więc prawdopodobnie nie nadaje się do bardzo dużych tablic.

Używaj wyrażeń tablicowych

W JavaScript 1.7 i nowszych wersjach tablic można używać do interpretacji tablic. Możesz także filtrować i / lub manipulować wpisami podczas wypełniania tablicy i nie musisz używać pętli.

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"]
         ]
*/

Możesz utworzyć dowolną n x mtablicę i wypełnić ją wartością domyślną, wywołując

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],
         ]
*/

Więcej przykładów i dokumentacji można znaleźć tutaj .

Pamiętaj, że nie jest to jeszcze standardowa funkcja .

Dla miłośników jednego liniowca Array.from ()

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

Kolejny (z komentarza dmitry_romanov) korzysta z Array (). Fill ()

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

Korzystanie z operatora rozprzestrzeniania ES6 + („zainspirowany” odpowiedzią InspiredJW :))

// same as above just a little shorter
const arr2d = [...Array(8)].map(() => Array(8).fill("0"))

Moje podejście jest bardzo podobne do odpowiedzi @Bineesh, ale z bardziej ogólnym podejściem.

Możesz zadeklarować podwójną tablicę w następujący sposób:

var myDoubleArray = [[]];

Przechowywanie i uzyskiwanie dostępu do zawartości w następujący sposób:

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'],) 

Spowoduje to wydrukowanie oczekiwanego wyniku

[ 9, 8 ] 9 123

Znalazłem poniżej jest najprostszym sposobem:

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

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

Wydajność

Dzisiaj 2020.02.05 wykonuję testy na MacOs HighSierra 10.13.6 na Chrome v79.0, Safari v13.0.4 i Firefox v72.0 dla wybranych rozwiązań.

Wnioski dla niezainicjowanej tablicy 2d

• ezoteryczne rozwiązanie {}/arr[[i,j]](N) jest najszybsze dla dużych i małych tablic i wygląda na to, że jest dobrym wyborem dla dużych rzadkich tablic
• rozwiązania oparte na for-[]/while(A, G) są szybkie i są dobrym wyborem dla małych tablic.
• rozwiązania for-[](B, C) są szybkie i są dobrym wyborem dla dużych tablic
• rozwiązania oparte na Array..map/from/fill(I, J, K, L, M) są dość wolne dla małych tablic i dość szybkie dla dużych tablic
• zaskakująco for-Array(n)(B, C) jest znacznie wolniejszy na safari niż for-[](A)
• zaskakująco for-[](A) dla dużej tablicy jest powolny we wszystkich przeglądarkach
• rozwiązania K działa powoli dla małych tablic dla wszystkich przeglądarek
• rozwiązania A, E, G są wolne dla dużych tablic dla wszystkich przeglądarek
• rozwiązanie M jest najwolniejsze dla wszystkich tablic we wszystkich przeglądarkach

Wnioski dotyczące zainicjowanej tablicy 2d

• rozwiązania oparte na for/while(A, B, C, D, E, G) są najszybsze / dość szybkie dla małych tablic we wszystkich przeglądarkach
• rozwiązania oparte na for(A, B, C, E) są najszybsze / dość szybkie dla dużych tablic we wszystkich przeglądarkach
• rozwiązania oparte na Array..map/from/fill(I, J, K, L, M) są średnio szybkie lub wolne dla małych tablic we wszystkich przeglądarkach
• rozwiązania F, G, H, I, J, K, L dla dużych tablic są średnie lub szybkie na Chrome i Safari, ale najwolniejsze na Firefox.
• ezoteryczne rozwiązanie {}/arr[[i,j]](N) jest najwolniejsze dla małych i dużych tablic we wszystkich przeglądarkach

Detale

Testuj rozwiązania, które nie wypełniają (inicjują) tablicy wyjściowej

Testujemy szybkość rozwiązań

• małe tablice (12 elementów) - testy możesz wykonać na swoim komputerze TUTAJ
• duże tablice (1 milion elementów) tablice - testy możesz wykonać na swoim komputerze TUTAJ

function A(r) {
  var arr = [];
  for (var i = 0; i < r; i++) arr[i] = [];
  return arr;
}

function B(r, c) {
  var arr = new Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = new Array(c);
  return arr;
}

function C(r, c) {
  var arr = Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = Array(c);
  return arr;
}

function D(r, c) {
  // strange, but works
  var arr = [];
  for (var i = 0; i < r; i++) {
    arr.push([]);
    arr[i].push(Array(c));
  }
  return arr;
}

function E(r, c) {
  let array = [[]];
  for (var x = 0; x < c; x++) {
    array[x] = [];
    for (var y = 0; y < r; y++) array[x][y] = [0];
  }
  return array;
}

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

    arr = Array(dims[0]);

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

    return arr;
  }
  return makeArray([r, c]);
}

function G(r) {
  var a = [];
  while (a.push([]) < r);
  return a;
}

function H(r,c) {
  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;
  }
  return createArray(r,c);
}

function I(r, c) {
  return [...Array(r)].map(x => Array(c));
}

function J(r, c) {
  return Array(r).fill(0).map(() => Array(c));
}

function K(r, c) {
  return Array.from(Array(r), () => Array(c));
}

function L(r, c) {
  return Array.from({length: r}).map(e => Array(c));
}

function M(r, c) {
  return Array.from({length: r}, () => Array.from({length: c}, () => {}));
}

function N(r, c) {
  return {}
}



// -----------------------------------------------
// SHOW
// -----------------------------------------------

log = (t, f) => {
  let A = f(3, 4); // create array with 3 rows and 4 columns
  A[1][2] = 6 // 2-nd row 3nd column set to 6
  console.log(`${t}[1][2]: ${A[1][2]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`);
}

log2 = (t, f) => {
  let A = f(3, 4); // create array with 3 rows and 4 columns
  A[[1,2]] = 6 // 2-nd row 3nd column set to 6
  console.log(`${t}[1][2]: ${A[[1,2]]}, full: ${JSON.stringify(A).replace(/null/g,'x')}`);
}

log('A', A);
log('B', B);
log('C', C);
log('D', D);
log('E', E);
log('F', F);
log('G', G);
log('H', H);
log('I', I);
log('J', J);
log('K', K);
log('L', L);
log('M', M);
log2('N', N);

This is presentation of solutions - not benchmark

Testuj rozwiązania, które wypełniają (inicjalizują) tablicę wyjściową

Testujemy szybkość rozwiązań

• małe tablice (12 elementów) - testy możesz wykonać na swoim komputerze TUTAJ
• duże tablice (1 milion elementów) tablice - testy możesz wykonać na swoim komputerze TUTAJ

function A(r, c, def) {
  var arr = [];
  for (var i = 0; i < r; i++) arr[i] = Array(c).fill(def);
  return arr;
}

function B(r, c, def) {
  var arr = new Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = new Array(c).fill(def);
  return arr;
}

function C(r, c, def) {
  var arr = Array(r);
  for (var i = 0; i < arr.length; i++) arr[i] = Array(c).fill(def);
  return arr;
}

function D(r, c, def) {
  // strange, but works
  var arr = [];
  for (var i = 0; i < r; i++) {
    arr.push([]);
    arr[i].push(Array(c));
  }
  for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[i][j]=def
  return arr;
}

function E(r, c, def) {
  let array = [[]];
  for (var x = 0; x < c; x++) {
    array[x] = [];
    for (var y = 0; y < r; y++) array[x][y] = def;
  }
  return array;
}

function F(r, c, def) {
  var makeArray = function(dims, arr) {
    if (dims[1] === undefined) {
      return Array(dims[0]).fill(def);
    }

    arr = Array(dims[0]);

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

    return arr;
  }
  return makeArray([r, c]);
}

function G(r, c, def) {
  var a = [];
  while (a.push(Array(c).fill(def)) < r);
  return a;
}

function H(r,c, def) {
  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).fill(def);
    }

    return arr;
  }
  return createArray(r,c);
}

function I(r, c, def) {
  return [...Array(r)].map(x => Array(c).fill(def));
}

function J(r, c, def) {
  return Array(r).fill(0).map(() => Array(c).fill(def));
}

function K(r, c, def) {
  return Array.from(Array(r), () => Array(c).fill(def));
}

function L(r, c, def) {
  return Array.from({length: r}).map(e => Array(c).fill(def));
}

function M(r, c, def) {
  return Array.from({length: r}, () => Array.from({length: c}, () => def));
}

function N(r, c, def) {
  let arr={};
  for (var i = 0; i < r; i++) for (var j = 0; j < c; j++) arr[[i,j]]=def;
  return arr;
}



// -----------------------------------------------
// SHOW
// -----------------------------------------------

log = (t, f) => {
  let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns, 
                          // each array cell initilised by 7
  A[800][900] = 5         // 800nd row and 901nd column set to 5
  console.log(`${t}[1][2]: ${A[1][2]}, ${t}[800][901]: ${A[800][900]}`);
}

log2 = (t, f) => {
  let A = f(1000,1000,7); // create array with 1000 rows and 1000 columns, 
                          // each array cell initilised by 7
  A[[800,900]] = 5            // 800nd row 900nd column set to 5
  console.log(`${t}[1][2]: ${A[[1,2]]}, ${t}[800][900]: ${A[[800,900]]}`);
}

log('A', A);
log('B', B);
log('C', C);
log('D', D);
log('E', E);
log('F', F);
log('G', G);
log('H', H);
log('I', I);
log('J', J);
log('K', K);
log('L', L);
log('M', M);
log2('N', N);

This is presentation of solutions - not benchmark

JavaScript nie obsługuje tablic dwuwymiarowych, zamiast tego przechowujemy tablicę wewnątrz innej tablicy i pobieramy dane z tej tablicy w zależności od pozycji tej tablicy, do której chcesz uzyskać dostęp. Pamiętaj, że numeracja tablic zaczyna się od ZERO .

Przykład kodu:

/* 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

ES6 +, ES2015 + mogą to zrobić w jeszcze prostszy sposób

Tworzenie tablicy 3 x 2 wypełnionej true

[...Array(3)].map(item => Array(2).fill(true))

Musiałem stworzyć elastyczną funkcję tablicową, aby w razie potrzeby dodawać do niej „rekordy” i móc je aktualizować i wykonywać wszelkie obliczenia, jakie były mi potrzebne, zanim wysłałem je do bazy danych w celu dalszego przetwarzania. Oto kod, mam nadzieję, że to pomoże :).

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"
}

Zachęcamy do optymalizacji i / lub wskazania błędów :)

Oto szybki sposób na stworzenie dwuwymiarowej tablicy.

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

Możesz łatwo zmienić tę funkcję w funkcję ES5.

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

Dlaczego to działa: new Array(n)konstruktor tworzy obiekt z prototypem, Array.prototypea następnie przypisuje obiekt length, w wyniku czego powstaje pusta tablica. Ze względu na brak rzeczywistych członków nie możemy uruchomić na nim Array.prototype.mapfunkcji.

Jeśli jednak podasz konstruktorowi więcej niż jeden argument, na przykład gdy to zrobisz Array(1, 2, 3, 4), konstruktor użyje argumentsobiektu do Arrayprawidłowego utworzenia i wypełnienia obiektu.

Z tego powodu możemy użyć Array.apply(null, Array(x)), ponieważ applyfunkcja rozłoży argumenty na konstruktor. Dla wyjaśnienia działanie Array.apply(null, Array(3))jest równoznaczne z działaniem Array(null, null, null).

Teraz, gdy stworzyliśmy faktycznie zapełnioną tablicę, wszystko, co musimy zrobić, to wywołać mapi utworzyć drugą warstwę ( y).

Poniżej jeden tworzy matrycę 5x5 i wypełnia je null

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

console.log(md);

Rozmiary wierszy i kolumn tablicy znane tylko w czasie wykonywania, a następnie można zastosować następującą metodę do utworzenia dynamicznej tablicy 2d .

var num = '123456';
var row = 3; // Known at run time
var col = 2; // Known at run time
var i = 0;

var array2D = [[]];
for(var r = 0; r < row; ++r)
{
    array2D[r] = [];
    for(var c = 0; c < col; ++c)
    {
        array2D[r][c] = num[i++];
    }
}
console.log(array2D); 
// [[ '1', '2' ], 
//  [ '3', '4' ], 
//  [ '5', '6' ]]

console.log(array2D[2][1]); // 6

Istnieje inne rozwiązanie, które nie zmusza do wstępnego zdefiniowania rozmiaru tablicy 2d i jest bardzo zwięzłe.

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

Działa to, ponieważ [1,2]przekształca się w ciąg znaków, który jest używany jako klucz ciągu dla tableobiektu.

Aby utworzyć tablicę 4x6, po prostu zrób to

const x = [...Array(6)].map(elem => new Array(4))