Cara membuat array multidimensi

148

Adakah yang bisa memberi saya contoh / contoh JavaScript dengan array input multidimensi? Semoga Anda bisa membantu karena saya masih baru di JavaScript.

Seperti ketika Anda memasukkan 2 baris dan 2 kolom, outputnya adalah 2 baris input dan 2 kolom input.

Seperti ini:

[input][input]                
[input][input]
Pemarah
sumber
2
Apa yang Anda maksud dengan 'input'? Sebuah <input>elemen atau hanya beberapa variabel?
pimvdb
1
ya pak .. <input type = "text">
SpitFire
Bagi mereka yang ingin membuat array multidimensi dengan ukuran dan jumlah dimensi yang berubah-ubah, periksa jawaban ini .
Pimp Trizkit

Jawaban:

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/

Dan jika Anda ingin menyimpan elemen 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';

Tidak begitu yakin seberapa berguna di atas sampai Anda melampirkan elemen. Di bawah ini mungkin lebih banyak yang Anda cari:

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

Atau, mungkin ini:

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

Pemberian yang mana:

[2, 0]

Di konsol. Jika Anda ingin menampilkannya ke teks, Anda bisa result.join(' ');, yang akan memberi Anda 2 0.

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

EDIT

Dan demonstrasi yang berhasil:

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

Jared Farrish
sumber
1
dapatkah saya mengetahui bagaimana ini bekerja pak .. saya agak bingung dengan Javascript
SpitFire
1
Apa yang membuatmu bingung?
Jared Farrish
tentang itu seperti saya akan membuat file HTML di mana ada dua input dan itu adalah input dari Baris dan Kolom atau sesuatu yang lain?
SpitFire
1
Saya tidak benar-benar mengikuti apa yang Anda katakan. Apa yang Anda coba dengan array Anda? (Juga, lihat hasil edit terakhir saya.)
Jared Farrish
dalam array saya akan memasukkan sejumlah baris dan kolom dengan nama atau ID unik..dan baris dan kolom lain dengan nama atau ID unik di mana array pertama dari input baris dan kolom akan dikurangkan ke input 2 R dan C ..
SpitFire
28

Kutipan diambil dari Struktur Data dan Algoritma dengan JavaScript

The Good Parts (O'Reilly, hlm. 64). Crockford memperluas objek array JavaScript dengan fungsi yang menetapkan jumlah baris dan kolom dan menetapkan setiap nilai ke nilai yang diteruskan ke fungsi. Berikut ini definisinya:

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

Berikut ini beberapa kode untuk menguji definisi:

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"

Kami juga dapat membuat array dua dimensi dan menginisialisasi ke serangkaian nilai dalam satu baris:

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

Dinyatakan tanpa penetapan nilai.

2 dimensi ...

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

3 dimensi ...

var arrayName = new Array(new Array(new Array()));
ShawnS
sumber
8
Kedua contoh ini tampaknya hanya menghasilkan array 1x1 & 1x1x1 (masing-masing), mungkin benar disebut array bersarang dimensi tunggal. Sebagai contoh var test=new Array(new Array());test[0][0]='1';test[0][1]='2';test[1][0]='3';kesalahan dengan pesanException: test[1] is undefined
user66001
2
Ini sepertinya salah. Ketika saya mencoba kode saya mendapatkan array 1x1x0. jsfiddle.net/zU8SB/1 Bagaimana mendapatkan 13 upvote?
Randall Cook
1
Masukkan dengan 'Array.push'
bagz_man
12

Saya tahu ini kuno tetapi bagaimana dengan ...

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

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

yang dapat diisi oleh:

for (var i=0; i<4; i++) {
   for (var j=0; j<4; j++) {
      matrix[i][j] = i*j;
   }
}
Nadav
sumber
Mungkin bisa membuatnya lebih jelas bahwa tidak ada "luar" 1x4 (jadi bukan matriks [3] [3] menjadi baris ke-4, kolom ke-4) dinyatakan (yaitu, dapat diakses) dengan deklarasi var ini. Juga, elemen pengaturan contoh [0] [1] hingga 5 melewatkan elemen pertama. Menggunakan [0] [0] sebagai gantinya, dapat berguna untuk menunjukkan titik array penting dalam banyak bahasa pemrograman.
user66001
9

sangat sederhana

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';
pengguna4839072
sumber
Ini sepertinya tidak berfungsi ketika saya mengujinya di konsol. Tampaknya nilai-nilai lama dihapus ketika saya menulis untuk mengatakan [0,1] dan [1,1], yang kedua menghapus [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";
Ken Jinks
sumber
7

Semoga kode berikut sesuai dengan kebutuhan Anda

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;
 }
}
Nishanth Suresh
sumber
IYA!! Telah berjuang dengan ini selamanya! Rahasianya adalah menciptakan array tambahan di kolom baris (atau jika iterasi melalui kisi, tingginya)
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();
    }

tingkatkan var setelah fungsi Anda.

Gaurav
sumber
3

Jadi, inilah solusi saya.

Contoh sederhana untuk Array 3x3. Anda dapat terus merantai ini untuk lebih dalam

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

Atau fungsi berikut akan menghasilkan level apa pun yang Anda suka

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/

BinaryOverdosis
sumber
2

Anda dapat membuat array, ikuti kode di bawah ini:

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

Hasil:
[v1] [v2] posisi 0
[v3] [v4] posisi 1
[v5] [v6] posisi 2

Untuk menambah array secara dinamis, gunakan metode di bawah ini:

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

Semoga ini membantu. :)

b1c10
sumber
1

Saya telah membuat modul npm untuk melakukan ini dengan beberapa fleksibilitas tambahan:

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

Anda juga dapat menginisialisasi posisi dengan nilai apa pun:

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

Atau lebih maju:

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

Dapatkan dan atur nilai di posisi:

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

// set value
threedimensional.position([2, 2, 2], 'New Value')
Arjun Mehta
sumber
0

Saya telah menulis satu linear untuk ini:

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

Namun saya merasa saya dapat menghabiskan lebih banyak waktu untuk membuat JSON.parse(JSON.stringify())versi -gratis yang digunakan untuk kloning di sini.

Btw, lihat jawaban saya yang lain di sini .

Ebrahim Byagowi
sumber
0

Saya tahu ini adalah pertanyaan lama tetapi di sini ada sesuatu untuk dicoba: Buat array multidimensi Anda, dan letakkan di dalam tag html. Dengan cara ini Anda dapat dengan tepat mengarahkan input array Anda:

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

Ini hanyalah cara yang lebih rapi untuk menulis kode Anda dan lebih mudah untuk memohon. Anda dapat memeriksa demo saya di sini!

Gareth Compton
sumber
Anda bisa lebih berani dengan membuat document.querySelectorAll();untuk mendapatkan kelas, id, dan bahkan elemen!
Gareth Compton