Comment créer un tableau en deux dimensions en JavaScript?

j'ai lu en ligne et certains endroits disent que ce n'est pas possible, certains disent que c'est possible, puis donnent un exemple et d'autres réfutent l'exemple, etc.

  1. Comment puis-je déclarer un tableau bidimensionnel en JavaScript? (en supposant que ce soit possible)

  2. comment accéder à ses membres? ( myArray[0][1] ou myArray[0,1] ?)

946
demandé sur royhowie 2009-06-08 22:24:54

30 réponses

var items = [
  [1, 2],
  [3, 4],
  [5, 6]
];
console.log(items[0][0]); // 1
console.log(items);
1095
répondu Ballsacian1 2016-09-10 15:20:13

vous faites simplement chaque élément dans le tableau un tableau.

var x = new Array(10);

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

console.log(x);
380
répondu Sufian 2018-08-29 08:56:37

similaire à la réponse d'activa, voici une fonction pour créer un tableau n-dimensionnel:

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)]
165
répondu Matthew Crumley 2013-03-31 08:46:28

Javascript n'a que des tableaux à une dimension, mais vous pouvez construire des tableaux de tableaux, comme d'autres l'ont fait remarquer.

La fonction suivante peut être utilisée pour construire un tableau 2d de taille fixe:

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

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

  return arr;
}

Le nombre de colonnes n'est pas vraiment important, parce qu'il n'est pas nécessaire de spécifier la taille d'un tableau avant de l'utiliser.

alors vous pouvez simplement appeler:

var arr = Create2DArray(100);

arr[50][2] = 5;
arr[70][5] = 7454;
// ...
69
répondu Philippe Leybaert 2009-06-08 18:32:00

la voie la plus facile:

var myArray = [[]];
63
répondu Fred 2013-01-22 18:47:57

la raison pour laquelle certains disent que ce n'est pas possible est parce qu'un tableau bidimensionnel est vraiment juste un tableau de tableaux. Les autres commentaires ici fournissent des méthodes parfaitement valides pour créer des tableaux bidimensionnels en JavaScript, mais le point de vue le plus pur serait que vous avez un tableau dimensionnel d'objets, chacun de ces objets serait un tableau dimensionnel composé de deux éléments.

donc, c'est la cause des points de vue contradictoires.

41
répondu James Conigliaro 2009-06-08 18:33:44

peu de gens montrent l'utilisation de push:

Pour apporter quelque chose de nouveau, je vais vous montrer comment initialiser la matrice avec une certaine valeur, exemple: 0 ou une chaîne vide "".

Rappelez-vous que si vous avez un tableau 10 éléments, en javascript le dernier index sera 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;
}

exemples d'utilisation:

x = matrix( 2 , 3,''); // 2 lines, 3 cols filled with empty string
y = matrix( 10, 5, 0);// 10 lines, 5 cols filled with 0
26
répondu Sergio Abreu 2013-08-08 02:22:30

double doublure:

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

il générera un tableau a de la longueur 10, rempli de tableaux. (Push ajoute un élément à un tableau et renvoie la nouvelle longueur)

23
répondu domenukk 2014-05-26 10:00:12

la réponse la plus saine semble être

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

Note Nous ne pouvons pas directement remplir avec les lignes car fill utilise un constructeur de copie peu profond, donc toutes les lignes partageraient la mémoire même ...voici un exemple qui montre comment chaque ligne serait partagée (tiré d'autres réponses):

// 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);
19
répondu Francesco Dondi 2018-07-28 11:00:39

la voie la plus facile:

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'
15
répondu Chicharito 2013-12-27 13:32:45

c'est Ce que j'ai obtenu :

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

Cela a sonné moi bineeshkumar

15
répondu Bineesh 2016-09-10 06:35:46

comment créer un tableau bidimensionnel vide (une ligne)

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

2 et 4 étant respectivement première et deuxième dimensions.

nous utilisons Array.from , qui peut prendre un tableau-comme param et un mapping optionnel pour chacun des éléments.

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

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

la même astuce peut être utilisée pour créer un tableau JavaScript contenant 1...N


alternativement (mais plus inefficace 12% avec n = 10,000 )

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

la diminution de performance vient avec le fait que nous devons avoir les valeurs de première dimension initialisées pour exécuter .map . Rappelez-vous que Array n'attribuera pas les postes tant que vous ne l'aurez pas commandé au moyen de .fill ou d'une assignation de valeur directe.

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

suivi

pourquoi ça ne marche pas?

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

bien qu'il renvoie le tableau bidimensionnel apparemment désiré ( [ [ <4 empty items> ], [ <4 empty items> ] ] ), il y a un hic: les tableaux de première dimension ont été copiés par référence. Que signifie un arr[0][0] = 'foo' changerait en fait deux lignes au lieu d'une.

var arr = Array(2).fill(Array(4));
arr[0][0] = 'foo';
console.info(arr);
console.info(arr[0][0], arr[1][0]);
14
répondu zurfyx 2018-03-09 22:38:54

les matrices bidimensionnelles sont créées de la même façon que les matrices unidimensionnelles. Et vous y accédez comme array[0][1] .

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

alert (arr[2][1]); //alerts "4"
13
répondu tj111 2009-06-08 18:27:57

Je ne suis pas sûr que quelqu'un ait répondu à cela, mais j'ai trouvé cela a fonctionné pour moi assez bien -

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

par exemple:

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

pour un tableau bidimensionnel, par exemple.

11
répondu Uchenna 2012-07-01 06:50:41

pour créer un tableau 2D en javaScript, nous pouvons d'abord créer un tableau et ensuite ajouter des tableaux en tant qu'éléments. Cette méthode retourne un tableau 2D avec le nombre donné de lignes et de colonnes.

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

pour créer un tableau utilisez cette méthode comme ci-dessous.

var array = Create2DArray(10,20);
10
répondu prime 2014-06-26 06:56:28

Use Tableau Compréhensions

en JavaScript 1.7 et plus, vous pouvez utiliser tableaux d'interprétation pour créer des tableaux bidimensionnels. Vous pouvez également filtrer et / ou manipuler les entrées tout en remplissant le tableau et ne pas avoir à utiliser des boucles.

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

vous pouvez créer n'importe quel tableau n x m que vous voulez et le remplir avec une valeur par défaut en appelant

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

plus d'exemples et de documentation peut être trouvé ici .

veuillez noter qu'il ne s'agit pas encore d'une caractéristique standard .

8
répondu Tim Hallyburton 2016-08-11 17:33:39

Pour un liner amoureux "151930920 Tableau.à partir de()

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

un autre (d'après le commentaire de dmitry_romanov) utilisez Array().de remplissage()

// creates 8x8 array filed with "0"    
const arr2d = Array(8).fill(0).map(() => Array(8).fill("0"));
7
répondu my- 2017-07-01 20:00:35

mon approche est très similaire à la réponse de @Bineesh mais avec une approche plus générale.

vous pouvez déclarer le double tableau comme suit:

var myDoubleArray = [[]];

et le stockage et l'accès au contenu de la manière suivante:

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

cela affichera la sortie attendue

[ 9, 8 ] 9 123
7
répondu Alexander 2018-01-14 00:25:07

j'ai trouvé ci-dessous est le moyen le plus simple:

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

alert(array1[0][100]);
alert(array1.length);
alert(array1[0].length);
5
répondu GMsoF 2014-04-15 09:14:47

j'ai dû faire une fonction de tableau flexible pour ajouter" des enregistrements " à lui que j'avais besoin et pour être en mesure de les mettre à jour et faire tous les calculs nécessaires e avant que je l'ai envoyé à une base de données pour un traitement ultérieur. Voici le code, j'espère que ça aide :).

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

N'hésitez pas à optimiser et / ou signaler tout bug:)

4
répondu CJ Mendes 2012-10-12 10:59:19

Javascript ne supporte pas les tableaux bidimensionnels, à la place nous stockons un tableau à l'intérieur d'un autre tableau et récupérons les données de ce tableau en fonction de la position de ce tableau à laquelle vous voulez accéder. N'oubliez pas que la numération du tableau commence par zéro .

Exemple De Code:

/* 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
répondu Rick 2015-07-30 23:53:01

ci-dessous un, crée une matrice 5x5 et les remplir avec null

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

console.log(md);
4
répondu zeah 2018-08-29 06:53:00

voici un moyen rapide que j'ai trouvé pour faire un tableau en deux dimensions.

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

vous pouvez facilement transformer cette fonction en une fonction ES5 ainsi.

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

pourquoi cela fonctionne: le constructeur new Array(n) crée un objet avec un prototype de Array.prototype et assigne ensuite l'objet length , résultant en un tableau Non peuplé. En raison de son manque de membres actuels, nous ne pouvons pas exécuter la fonction Array.prototype.map .

cependant, lorsque vous fournissez plus d'un argument au constructeur, comme lorsque vous faites Array(1, 2, 3, 4) , le constructeur utilisera l'objet arguments pour instancier et peupler correctement un objet Array .

pour cette raison, nous pouvons utiliser Array.apply(null, Array(x)) , parce que la fonction apply diffusera les arguments dans le constructeur. Par souci de clarification, faire Array.apply(null, Array(3)) équivaut à faire Array(null, null, null) .

maintenant que nous avons créé un véritable réseau peuplé, tout ce que nous avons à faire est d'appeler map et de créer la deuxième couche ( y ).

3
répondu dimiguel 2016-03-25 05:56:18

, Vous pouvez allouer un tableau de lignes, où chaque ligne est un tableau de la même longueur. Ou vous pouvez affecter un tableau unidimensionnel avec des éléments rows*columns et définir des méthodes pour mapper les coordonnées de ligne/colonne aux indices d'élément.

quelle que soit l'implémentation choisie, si vous l'enveloppez dans un objet, vous pouvez définir les méthodes accessor dans un prototype pour rendre l'API facile à utiliser.

2
répondu Nat 2009-06-08 18:32:38

j'ai trouvé que ce code fonctionne pour moi:

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
répondu Fabced 2014-06-14 15:46:56

exemple simplifié:

var blocks = [];

blocks[0] = [];

blocks[0][0] = 7;
2
répondu rickatech 2015-09-21 07:05:23

une doublure pour créer un tableau 2 dimensions m*n rempli de 0.

new Array(m).fill(new Array(n).fill(0));
2
répondu geniuscarrier 2017-01-03 01:07:45

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
répondu antelove 2017-10-03 15:22:59

j'ai fait une modification de Matthew Crumley réponse de la création d'une fonction de tableau multidimensionnel. J'ai ajouté les dimensions du tableau à passer comme variable du tableau et il y aura une autre variable - value , qui sera utilisée pour définir les valeurs des éléments des derniers tableaux dans le tableau multidimensionnel.

/*
*   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
répondu Hristo Enev 2017-05-23 12:03:09

fonction Récursive pour créer un tableau multidimensionnel:

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

Construire un 2x3x4x2 4D-Tableau:

var array = makeArray([2, 3, 4, 2]);    
1
répondu chessweb 2015-05-05 19:55:06