Come creare un array multidimensionale


148

Qualcuno può darmi un esempio / esempio di JavaScript con una matrice multidimensionale di input? Spero che tu possa aiutarti perché sono ancora nuovo di JavaScript.

Come quando inserisci 2 righe e 2 colonne, l'output di esso sarà 2 righe di input e 2 colonne di input.

Come questo:

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

2
Cosa intendi con "input"? Un <input>elemento o solo qualche variabile?
pimvdb,

1
sì signore .. an <input type = "text">
SpitFire

Per coloro che desiderano creare array multidimensionali con dimensioni e numero arbitrari di dimensioni, controllare questa risposta .
Pimp Trizkit,

Risposte:


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/

E se desideri archiviare elementi 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';

Non sono sicuro di quanto sia utile quanto sopra fino a quando non si collegano gli elementi. Di seguito potrebbe essere più quello che stai cercando:

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

O forse questo:

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

Che dà:

[2, 0]

Nella console. Se vuoi inviarlo in testo, puoi result.join(' ');, cosa che ti darebbe 2 0.

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

MODIFICARE

E una dimostrazione di lavoro:

<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
posso sapere come funziona questo signore ... sono un po 'confuso di Javascript
SpitFire

1
Di cosa sei confuso?
Jared Farrish,

è come se avessi intenzione di creare un file HTML in cui sono presenti due input ed è l'input di Righe e Colonne o qualcos'altro?
SpitFire,

1
Non sto davvero seguendo quello che stai dicendo. Cosa stai provando con il tuo array? (Vedi anche la mia ultima modifica.)
Jared Farrish,

nell'array ho intenzione di inserire un numero di righe e colonne con un nome o ID univoco ... e altre righe e colonne con un nome o ID univoco in cui il primo array di input righe e colonne verrà sottratto al 2o input di R e C ..
SpitFire,

28

Citazione tratta da Strutture dati e algoritmi con JavaScript

The Good Parts (O'Reilly, p. 64). Crockford estende l'oggetto array JavaScript con una funzione che imposta il numero di righe e colonne e imposta ciascun valore su un valore passato alla funzione. Ecco la sua definizione:

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

Ecco un po 'di codice per testare la definizione:

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"

Possiamo anche creare un array bidimensionale e inizializzarlo su un set di valori in una riga:

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

15

Dichiarato senza assegnazione di valore.

2 dimensioni ...

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

3 dimensioni ...

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

8
Entrambi questi esempi sembrano produrre solo array 1x1 e 1x1x1 (rispettivamente), forse chiamati correttamente array nidificati a dimensione singola. Ad esempio var test=new Array(new Array());test[0][0]='1';test[0][1]='2';test[1][0]='3';errori con il messaggioException: test[1] is undefined
user66001

2
Questo sembra sbagliato. Quando provo il codice ottengo un array 1x1x0. jsfiddle.net/zU8SB/1 Come ha ottenuto 13 voti positivi?
Randall Cook,

1
Inserisci con "Array.push"
bagz_man il

12

So che questo è antico ma che dire ...

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

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

che può essere riempito da:

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

Forse potrebbe rendere più ovvio che nulla di "esterno" 1x4 (quindi non la matrice [3] [3] essendo la 4a fila, 4a colonna) è dichiarato (cioè accessibile) con questa dichiarazione var. Inoltre, l'elemento di impostazione di esempio [0] [1] su 5 salta il primo elemento. L'uso di [0] [0] invece potrebbe essere utile per dimostrare un importante punto di array in molti linguaggi di programmazione.
user66001,

9

molto semplice

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

Questo non sembra funzionare quando lo collaudo nella console. Sembra che i vecchi valori vengano cancellati quando scrivo per dire un [0,1] e un [1,1], il secondo cancella 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

Spero che il seguente codice soddisfi le tue esigenze

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

SÌ!! Ho lottato con questo per sempre! Il segreto sta creando l'array extra nella colonna della riga (o se si scorre attraverso una griglia, l'altezza)
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();
    }

aumentare le dimensioni var dopo la funzione.


3

Quindi ecco la mia soluzione.

Un semplice esempio per un array 3x3. Puoi continuare a concatenarti per approfondire

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

O la seguente funzione genererà qualsiasi livello profondo che ti piace

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

puoi creare un array seguendo il codice qui sotto:

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

Risultato:
[v1] [v2] posizione 0
[v3] [v4] posizione 1
[v5] [v6] posizione 2

Per aggiungere dinamicamente all'array, utilizzare il metodo seguente:

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

Spero che questo ti aiuti. :)


1

Ho creato un modulo npm per farlo con una certa flessibilità aggiuntiva:

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

Puoi anche inizializzare le posizioni con qualsiasi valore:

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

O più avanzato:

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

Ottieni e imposta valori in posizioni:

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

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

0

Ho scritto uno lineare per questo:

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

Sento comunque di poter dedicare più tempo alla creazione di una JSON.parse(JSON.stringify())versione gratuita che viene utilizzata per la clonazione qui.

A proposito, dai un'occhiata alla mia altra risposta qui .


0

So che questa è una vecchia domanda, ma qui c'è qualcosa da provare: crea il tuo array multidimensionale e inseriscilo in un tag html. In questo modo puoi mirare con precisione l'input del tuo array:

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

È semplicemente un modo più semplice per scrivere il codice e più facile da invocare. Puoi controllare la mia demo qui!


puoi diventare più audace creando document.querySelectorAll();classi, ID e persino elementi!
Gareth Compton,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.