Comment créer un tableau multidimensionnel


148

Quelqu'un peut-il me donner un exemple / exemple de JavaScript avec un tableau multidimensionnel d'entrées? J'espère que vous pourrez m'aider car je suis encore nouveau dans le JavaScript.

Comme lorsque vous entrez 2 lignes et 2 colonnes, la sortie de celui-ci sera 2 lignes d'entrée et 2 colonnes d'entrée.

Comme ça:

[input][input]                
[input][input]

2
Que voulez-vous dire par «entrées»? Un <input>élément ou juste une variable?
pimvdb

1
oui monsieur .. an <input type = "text">
SpitFire

Pour ceux qui cherchent à créer des tableaux multidimensionnels avec des tailles et un nombre de dimensions arbitraires, cochez cette réponse .
Pimp Trizkit

Réponses:


318
var numeric = [
    ['input1','input2'],
    ['input3','input4']
];
numeric[0][0] == 'input1';
numeric[0][1] == 'input2';
numeric[1][0] == 'input3';
numeric[1][1] == 'input4';

var obj = {
    'row1' : {
        'key1' : 'input1',
        'key2' : 'input2'
    },
    'row2' : {
        'key3' : 'input3',
        'key4' : 'input4'
    }
};
obj.row1.key1 == 'input1';
obj.row1.key2 == 'input2';
obj.row2.key1 == 'input3';
obj.row2.key2 == 'input4';

var mixed = {
    'row1' : ['input1', 'inpu2'],
    'row2' : ['input3', 'input4']
};
mixed.row1[0] == 'input1';
mixed.row1[1] == 'input2';
mixed.row2[0] == 'input3';
mixed.row2[1] == 'input4';

http://jsfiddle.net/z4Un3/

Et si vous souhaitez stocker des éléments DOM:

var inputs = [
    [
        document.createElement('input'),
        document.createElement('input')
    ],
    [
        document.createElement('input'),
        document.createElement('input')
    ]
];
inputs[0][0].id = 'input1';
inputs[0][1].id = 'input2';
inputs[1][0].id = 'input3';
inputs[1][1].id = 'input4';

Je ne sais pas vraiment à quel point ce qui précède est utile tant que vous n’ajoutez pas les éléments. Ce qui suit peut être plus ce que vous recherchez:

<input text="text" id="input5"/>
<input text="text" id="input6"/>
<input text="text" id="input7"/>
<input text="text" id="input8"/>    
var els = [
    [
        document.getElementById('input5'),
        document.getElementById('input6')
    ],
    [
        document.getElementById('input7'),
        document.getElementById('input8')
    ]
];    
els[0][0].id = 'input5';
els[0][1].id = 'input6';
els[1][0].id = 'input7';
els[1][1].id = 'input8';

http://jsfiddle.net/z4Un3/3/

Ou peut-être ceci:

<input text="text" value="4" id="input5"/>
<input text="text" value="4" id="input6"/>
<br/>
<input text="text" value="2" id="input7"/>
<input text="text" value="4" id="input8"/>

var els = [
    [
        document.getElementById('input5'),
        document.getElementById('input6')
    ],
    [
        document.getElementById('input7'),
        document.getElementById('input8')
    ]
];

var result = [];

for (var i = 0; i < els.length; i++) {
    result[result.length] = els[0][i].value - els[1][i].value;
}

Qui donne:

[2, 0]

Dans la console. Si vous voulez afficher cela sous forme de texte, vous pouvez result.join(' ');, ce qui vous donnerait 2 0.

http://jsfiddle.net/z4Un3/6/

ÉDITER

Et une démonstration de travail:

<input text="text" value="4" id="input5"/>
<input text="text" value="4" id="input6"/>
<br/>
<input text="text" value="2" id="input7"/>
<input text="text" value="4" id="input8"/>
<br/>
<input type="button" value="Add" onclick="add()"/>

// This would just go in a script block in the head
function add() {
    var els = [
        [
            document.getElementById('input5'),
            document.getElementById('input6')
        ],
        [
            document.getElementById('input7'),
            document.getElementById('input8')
        ]
    ];

    var result = [];

    for (var i = 0; i < els.length; i++) {
        result[result.length] = parseInt(els[0][i].value) - parseInt(els[1][i].value);
    }

    alert(result.join(' '));
}

http://jsfiddle.net/z4Un3/8/


1
puis-je savoir comment donc ce travail monsieur .. je
suis

1
De quoi êtes-vous confus?
Jared Farrish

Est-ce que c'est comme si j'allais créer un fichier HTML où il y a deux entrées et ce sont les entrées de lignes et de colonnes ou autre chose?
SpitFire

1
Je ne suis pas vraiment ce que vous dites. Qu'essayez-vous de faire avec votre tableau? (Aussi, voir ma dernière édition.)
Jared Farrish

dans le tableau, je vais entrer un certain nombre de lignes et de colonnes avec un nom ou un ID unique..et d'autres lignes et colonnes avec un nom ou un ID unique où le premier tableau de lignes et de colonnes d'entrées sera soustrait aux 2ème entrées de R and C ..
SpitFire

28

Citation tirée des structures de données et des algorithmes avec JavaScript

Les bonnes parties (O'Reilly, p. 64). Crockford étend l'objet de tableau JavaScript avec une fonction qui définit le nombre de lignes et de colonnes et définit chaque valeur sur une valeur transmise à la fonction. Voici sa définition:

Array.matrix = function(numrows, numcols, initial) {
    var arr = [];
    for (var i = 0; i < numrows; ++i) {
        var columns = [];
        for (var j = 0; j < numcols; ++j) {
            columns[j] = initial;
        }
        arr[i] = columns;
    }
    return arr;
}

Voici du code pour tester la définition:

var nums = Array.matrix(5,5,0);
print(nums[1][1]); // displays 0
var names = Array.matrix(3,3,"");
names[1][2] = "Joe";
print(names[1][2]); // display "Joe"

Nous pouvons également créer un tableau à deux dimensions et l'initialiser à un ensemble de valeurs sur une ligne:

var grades = [[89, 77, 78],[76, 82, 81],[91, 94, 89]];
print(grades[2][2]); // displays 89

15

Déclaré sans attribution de valeur.

2 dimensions ...

var arrayName = new Array(new Array());

3 dimensions ...

var arrayName = new Array(new Array(new Array()));

8
Ces deux exemples semblent ne produire que des tableaux 1x1 et 1x1x1 (respectivement), peut-être correctement appelés tableaux imbriqués à dimension unique. Comme exemple d' var test=new Array(new Array());test[0][0]='1';test[0][1]='2';test[1][0]='3';erreurs avec messageException: test[1] is undefined
user66001

2
Cela semble faux. Lorsque j'essaye le code, j'obtiens un tableau 1x1x0. jsfiddle.net/zU8SB/1 Comment a-t-il obtenu 13 votes positifs?
Randall Cook

1
Insérer avec 'Array.push'
bagz_man

12

Je sais que c'est ancien mais qu'en est-il ...

Exemple 4x4 (actually 4x<anything>):

var matrix = [ [],[],[],[] ]

qui peut être rempli par:

for (var i=0; i<4; i++) {
   for (var j=0; j<4; j++) {
      matrix[i][j] = i*j;
   }
}

Cela pourrait peut-être rendre plus évident que rien "en dehors" de 1x4 (donc pas la matrice [3] [3] étant la 4ème ligne, 4ème colonne) n'est déclaré (c'est-à-dire accessible) avec cette déclaration var. De plus, l'exemple de définition d'élément [0] [1] à 5 ignore le premier élément. L'utilisation de [0] [0] à la place pourrait être utile pour démontrer un point important des tableaux dans de nombreux langages de programmation.
user66001

9

très simple

var states = [,];
states[0,0] = tName; 
states[0,1] = '1';
states[1,0] = tName; 
states[2,1] = '1';

. . .

states[n,0] = tName; 
states[n,1] = '1';

Cela ne semble pas fonctionner lorsque je le teste dans la console. Il semble que les anciennes valeurs soient supprimées lorsque j'écris pour dire un [0,1] et un [1,1], la seconde supprime un [0,1] ...
Thomas Dignan

8
function Array2D(x, y)
{
    var array2D = new Array(x);

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

    return array2D;
}

var myNewArray = Array2D(4, 9);

myNewArray[3][5] = "booger";

7

J'espère que le code suivant répond à vos besoins

var row= 20;
var column= 10;
var f = new Array();

for (i=0;i<row;i++) {
 f[i]=new Array();
 for (j=0;j<column;j++) {
  f[i][j]=0;
 }
}

OUI!! J'ai lutté avec ça pour toujours! Le secret est de créer le tableau supplémentaire dans la colonne de ligne (ou en cas d'itération à travers une grille, la hauteur)
NiCk Newman

4
var size = 0;   
 var darray = new Array();
    function createTable(){
        darray[size] = new Array();
        darray[size][0] = $("#chqdate").val();
        darray[size][1]= $("#chqNo").val();
        darray[size][2] = $("#chqNarration").val() ;
        darray[size][3]= $("#chqAmount").val();
        darray[size][4]= $("#chqMode").val();
    }

augmenter la taille var après votre fonction.


3

Alors voici ma solution.

Un exemple simple pour un tableau 3x3. Vous pouvez continuer à enchaîner cela pour aller plus loin

Array(3).fill().map(a => Array(3))

Ou la fonction suivante générera n'importe quel niveau de profondeur que vous aimez

f = arr => {
    let str = 'return ', l = arr.length;
    arr.forEach((v, i) => {
        str += i < l-1 ? `Array(${v}).fill().map(a => ` : `Array(${v}` + ')'.repeat(l);
    });
    return Function(str)();
}
f([4,5,6]) // Generates a 4x5x6 Array

http://www.binaryoverdose.com/2017/02/07/Generating-Multidimensional-Arrays-in-JavaScript/


2

vous pouvez créer un tableau en suivant le code ci-dessous:

var arraymultidimensional = []
    arraymultidimensional = [[value1,value2],[value3,value4],[value5,value6]];

Résultat:
[v1] [v2] position 0
[v3] [v4] position 1
[v5] [v6] position 2

Pour ajouter au tableau de manière dynamique, utilisez la méthode ci-dessous:

//vectorvalue format = "[value,value,...]"
function addToArray(vectorvalue){
  arraymultidimensional[arraymultidimensional.length] = vectorvalue;
}

J'espère que cela t'aides. :)


1

J'ai créé un module npm pour ce faire avec une flexibilité supplémentaire:

// create a 3x3 array
var twodimensional = new MultiDimensional([3, 3])

// create a 3x3x4 array
var threedimensional = new MultiDimensional([3, 3, 4])

// create a 4x3x4x2 array
var fourdimensional = new MultiDimensional([4, 3, 4, 2])

// etc...

Vous pouvez également initialiser les positions avec n'importe quelle valeur:

// create a 3x4 array with all positions set to 0
var twodimensional = new MultiDimensional([3, 4], 0)

// create a 3x3x4 array with all positions set to 'Default String'
var threedimensionalAsStrings = new MultiDimensional([3, 3, 4], 'Default String')

Ou plus avancé:

// create a 3x3x4 array with all positions set to a unique self-aware objects.
var threedimensional = new MultiDimensional([3, 3, 4], function(position, multidimensional) {
    return {
        mydescription: 'I am a cell at position ' + position.join(),
        myposition: position,
        myparent: multidimensional
    }
})

Obtenez et définissez des valeurs aux positions:

// get value
threedimensional.position([2, 2, 2])

// set value
threedimensional.position([2, 2, 2], 'New Value')

0

J'ai écrit un linéaire pour cela:

[1, 3, 1, 4, 1].reduceRight((x, y) => new Array(y).fill().map(() => JSON.parse(JSON.stringify(x))), 0);

Je pense cependant que je peux passer plus de temps à créer une JSON.parse(JSON.stringify())version -free qui est utilisée pour le clonage ici.

Btw, jetez un oeil à ma autre réponse ici .


0

Je sais que c'est une vieille question, mais voici quelque chose à essayer: Créez votre tableau multidimensionnel et placez-le dans une balise html. De cette façon, vous pouvez viser précisément l'entrée de votre tableau:

//Your Holding tag for your inputs!
<div id='input-container' class='funky'></div>

<script>
    //With VAR: you can seperate each variable with a comma instead of:
    //creating var at the beginning and a semicolon at the end.
    //Creates a cleaner layout of your variables
    var
        arr=[['input1-1','input1-2'],['input2-1','input2-2']],
        //globall calls these letters var so you dont have to recreate variable below
        i,j
    ;

    //Instead of the general 'i<array.length' you can go even further
    //by creating array[i] in place of 'i<array.length'
    for(i=0;arr[i];i++){
    for(j=0;arr[i][j];j++){
        document.getElementById('input-container').innerHTML+=
            "<input class='inner-funky'>"+arr[i][j]+"</input>"
        ;
    }}
</script>

C'est simplement une manière plus soignée d'écrire votre code et plus facile à appeler. Vous pouvez consulter ma démo ici!


vous pouvez devenir plus audacieux en faisant document.querySelectorAll();pour obtenir des classes, des identifiants et même des éléments!
Gareth Compton
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.