Pesquisa de site

javascript - Como criar um array multidimensional

Alguém pode me dar um exemplo de JavaScript com um array multidimensional de entradas? Espero que você possa ajudar porque ainda sou novo em JavaScript.

Como quando você insere 2 linhas e 2 colunas, a saída disso será 2 linhas de entrada e 2 colunas de entrada.

Como isto:

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

Resposta #1

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 você quiser armazenar elementos 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';

Não tenho muita certeza de quão útil é o que está acima até você anexar os elementos. O que está abaixo pode ser mais o que você está procurando:

<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, talvez isto:

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

O que resulta em:

[2, 0]

No console. Se você quiser imprimir isso em texto, você pode result.join(' ');, o que lhe daria 2 0.

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

EDITAR

E uma demonstração funcional:

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

Resposta #2

Citação retirada de Estruturas de Dados e Algoritmos com JavaScript

As Partes Boas (O’Reilly, p. 64). Crockford estende o objeto array do JavaScript com uma função que define o número de linhas e colunas e define cada valor para um valor passado à função. Aqui está a sua definição:

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

Aqui está algum código para testar a definição:

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"

Também podemos criar um array bidimensional e inicializá-lo com um conjunto de valores em uma linha:

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

Resposta #3

Declarado sem atribuição de valor.

2 dimensões...

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

3 dimensões...

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

Resposta #4

Eu sei que isso é antigo, mas e quanto a...

Exemplo 4x4 (na verdade 4x<qualquer coisa>):

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

que pode ser preenchido por:

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

Artigos relacionados