So erstellen Sie ein mehrdimensionales Array


148

Kann mir jemand ein Beispiel / Beispiel für JavaScript mit einem mehrdimensionalen Array von Eingaben geben? Ich hoffe, Sie könnten helfen, da ich noch neu im JavaScript bin.

Wie bei der Eingabe von 2 Zeilen und 2 Spalten werden 2 Eingabezeilen und 2 Eingabespalten ausgegeben.

So was:

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

2
Was meinst du mit "Eingaben"? Ein <input>Element oder nur eine Variable?
Pimvdb

1
Ja, Sir. Ein <input type = "text">
SpitFire

Wenn Sie mehrdimensionale Arrays mit beliebigen Größen und Dimensionen erstellen möchten, überprüfen Sie diese Antwort .
Pimp Trizkit

Antworten:


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/

Und wenn Sie DOM-Elemente speichern möchten:

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

Ich bin mir nicht sicher, wie nützlich das oben genannte ist, bis Sie die Elemente anhängen. Das Folgende könnte mehr sein, wonach Sie suchen:

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

Oder vielleicht das:

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

Welches gibt:

[2, 0]

In der Konsole. Wenn Sie das als Text ausgeben möchten, können Sie result.join(' ');, was Ihnen geben würde 2 0.

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

BEARBEITEN

Und eine funktionierende Demonstration:

<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
Kann ich wissen, wie so diese Arbeit, Sir
? Ich bin ein bisschen

1
Worüber bist du verwirrt?
Jared Farrish

Wie ist es, als würde ich eine HTML-Datei erstellen, in der es zwei Eingaben gibt, und es sind die Eingaben von Zeilen und Spalten oder etwas anderes?
SpitFire

1
Ich folge nicht wirklich dem, was du sagst. Was versuchst du mit deinem Array? (Siehe auch meine letzte Änderung.)
Jared Farrish

Im Array werde ich eine Anzahl von Zeilen und Spalten mit einem eindeutigen Namen oder einer eindeutigen ID eingeben. Weitere Zeilen und Spalten mit einem eindeutigen Namen oder einer eindeutigen ID, wobei das erste Array von Eingabezeilen und -spalten von den zweiten Eingaben von R subtrahiert wird und C ..
SpitFire

28

Zitat aus Datenstrukturen und Algorithmen mit JavaScript

Die guten Teile (O'Reilly, S. 64). Crockford erweitert das JavaScript-Array-Objekt um eine Funktion, die die Anzahl der Zeilen und Spalten und jeden Wert auf einen an die Funktion übergebenen Wert festlegt. Hier ist seine Definition:

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

Hier ist ein Code zum Testen der Definition:

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"

Wir können auch ein zweidimensionales Array erstellen und es mit einer Reihe von Werten in einer Zeile initialisieren:

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

15

Ohne Wertzuweisung deklariert.

2 Dimensionen ...

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

3 Dimensionen ...

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

8
Diese beiden Beispiele scheinen nur 1x1- bzw. 1x1x1-Arrays zu erzeugen, die möglicherweise als verschachtelte Arrays mit einer Dimension bezeichnet werden. Als Beispiel var test=new Array(new Array());test[0][0]='1';test[0][1]='2';test[1][0]='3';Fehler mit NachrichtException: test[1] is undefined
Benutzer66001

2
Das scheint falsch zu sein. Wenn ich den Code versuche, erhalte ich ein 1x1x0-Array. jsfiddle.net/zU8SB/1 Wie hat es 13 positive Stimmen bekommen?
Randall Cook

1
Einfügen mit 'Array.push'
bagz_man

12

Ich weiß, das ist uralt, aber was ist mit ...

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

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

die gefüllt werden kann durch:

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

Vielleicht könnte es offensichtlicher werden, dass mit dieser var-Deklaration nichts "außerhalb" von 1x4 (also nicht Matrix [3] [3] als 4. Zeile, 4. Spalte) deklariert (dh zugänglich) wird. Außerdem überspringt das Beispieleinstellungselement [0] [1] auf 5 das erste Element. Die Verwendung von [0] [0] könnte nützlich sein, um einen wichtigen Punkt von Arrays in vielen Programmiersprachen zu demonstrieren.
user66001

9

sehr einfach

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

Dies scheint nicht zu funktionieren, wenn ich es in der Konsole teste. Es scheint, dass die alten Werte gelöscht werden, wenn ich schreibe, um a [0,1] und a [1,1] zu sagen, der zweite löscht ein [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

Hoffe, der folgende Code entspricht Ihrer Anforderung

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

JA!! Ich habe schon immer damit gekämpft! Das Geheimnis ist das Erstellen des zusätzlichen Arrays in der Zeilenspalte (oder, wenn Sie durch ein Raster iterieren, die Höhe)
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();
    }

Erhöhen Sie die Größe var nach Ihrer Funktion.


3

Hier ist meine Lösung.

Ein einfaches Beispiel für ein 3x3-Array. Sie können dies weiter verketten, um tiefer zu gehen

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

Oder die folgende Funktion erzeugt ein beliebiges Level, das Sie mögen

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

Sie können ein Array erstellen, indem Sie den folgenden Code befolgen:

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

Ergebnis:
[v1] [v2] Position 0
[v3] [v4] Position 1
[v5] [v6] Position 2

Verwenden Sie die folgende Methode, um das Array dinamisch hinzuzufügen:

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

Hoffe das hilft. :) :)


1

Ich habe ein npm-Modul erstellt , um dies mit zusätzlicher Flexibilität zu tun:

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

Sie können die Positionen auch mit einem beliebigen Wert initialisieren:

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

Oder fortgeschrittener:

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

Werte an folgenden Positionen abrufen und festlegen:

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

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

0

Ich habe dafür eine lineare geschrieben:

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

Ich habe jedoch das Gefühl, dass ich mehr Zeit damit verbringen kann, eine JSON.parse(JSON.stringify())kostenlose Version zu erstellen, die hier zum Klonen verwendet wird .

Übrigens, schauen Sie sich hier meine andere Antwort an .


0

Ich weiß, dass dies eine alte Frage ist, aber hier ist etwas zu versuchen: Erstellen Sie Ihr mehrdimensionales Array und platzieren Sie es in einem HTML-Tag. Auf diese Weise können Sie die Eingabe Ihres Arrays genau ausrichten:

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

Es ist einfach eine übersichtlichere Art, Ihren Code zu schreiben und einfacher aufzurufen. Sie können meine Demo hier überprüfen !


Sie können mutiger werden, indem document.querySelectorAll();Sie Klassen, IDs und sogar Elemente abrufen!
Gareth Compton
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.