Ein leeres zweidimensionales Array in Javascript deklarieren?

74

Ich möchte ein zweidimensionales Array in Javascript erstellen, in dem ich die Koordinaten (x, y) speichern werde. Ich weiß noch nicht, wie viele Koordinatenpaare ich haben werde, da sie durch Benutzereingaben dynamisch generiert werden.

Beispiel für ein vordefiniertes 2d-Array:

var Arr=[[1,2],[3,4],[5,6]];

Ich denke, ich kann die PUSH-Methode verwenden, um am Ende des Arrays einen neuen Datensatz hinzuzufügen.

Wie deklariere ich ein leeres zweidimensionales Array, damit es bei Verwendung meines ersten Arr.push () zum Index 0 hinzugefügt wird und jeder nächste durch Push geschriebene Datensatz den nächsten Index erhält?

Dies ist wahrscheinlich sehr einfach, ich bin nur ein Neuling bei JS, und ich würde mich freuen, wenn jemand einen kurzen Arbeitscode-Ausschnitt schreiben könnte, den ich untersuchen könnte. Vielen Dank

Zannix
quelle
Hast du es versucht var Arr = new Array(new Array());? Und ja, pushund pophinzufügen oder Elemente aus dem Ende des Arrays entfernen, während shiftund unshiftentfernen oder Elemente am Anfang des Arrays hinzuzufügen.
Abiessu
Das klingt nach zwei verschiedenen Fragen. Zuerst möchten Sie das Array beliebiger Größe. Dann stellen Sie eine andere Frage, die die Push-Methode betrifft. (Wenn Sie Ihre eigene Frage beantworten möchten, sollten Sie dies am besten im Antwortbereich tun.) Dies ist eine hochrangige Frage in Google zum Erstellen eines mehrdimensionalen Arrays in JavaScript, und ich weiß, dass Google dies nicht tut diktiere hier den Inhalt, aber ich würde sagen, es ist eine grundlegend wichtige Frage mit einer Vielzahl verrückter Antworten.
PJ Brunet

Antworten:

85

Sie können ein reguläres Array einfach wie folgt deklarieren:

var arry = [];

Wenn Sie dann zwei Werte zum Array hinzufügen möchten, müssen Sie lediglich Folgendes tun:

arry.push([value_1, value2]);

Und ja, beim ersten Aufruf arry.pushwird das Wertepaar auf den Index 0 gesetzt.

Aus der nodejs-Antwort:

> var arry = [];
undefined
> arry.push([1,2]);
1
> arry
[ [ 1, 2 ] ]
> arry.push([2,3]);
2
> arry
[ [ 1, 2 ], [ 2, 3 ] ]

Da Javascript dynamisch typisiert wird, gibt es natürlich keine Typprüfung, die erzwingt, dass das Array zweidimensional bleibt. Sie müssen sicherstellen, dass Sie nur Koordinatenpaare hinzufügen und nicht Folgendes tun:

> arry.push(100);
3
> arry
[ [ 1, 2 ],
  [ 2, 3 ],
  100 ]
DJG
quelle
1
Dies scheint eine elegante Lösung zu sein, daher habe ich X- und Y-Koordinaten und füge sie wie folgt ein: arry.push ([x, y]); - aber wie komme ich später zurück, zum Beispiel die x-Koordinate auf Index 0?
Zannix
2
Sie können einfach Arry [0] [0] abrufen. (Und um die Y-Koordinate zu erhalten, können Sie Arry [0] [1] abrufen.)
DJG
45

Wenn Sie zusammen mit der Erstellung initialisieren möchten, können Sie Füllen und Zuordnen verwenden .

const matrix = new Array(5).fill(0).map(() => new Array(4).fill(0));

5 ist die Anzahl der Zeilen und 4 ist die Anzahl der Spalten.

AbhinavD
quelle
Dies funktioniert auch in deklarativen Kontexten, z. B. vor der Zuweisung eines 2d-Arrays als Objektelement. Vielleicht nicht etwas, das man von Grund auf neu entwerfen würde, aber nützlich für Aufgaben wie das Portieren aus anderen Sprachen.
Steve.sims
15
Bitte beachten Sie auch, dass hier map(() => {})eine eigenständige Zeile erstellt wird und dies erforderlich ist. Der Weg new Array(5).fill(new Array(4).fill(0))ist ein sehr gefährlicher Schachzug. Da alle Zeilen mit Verweisen auf EIN Array gefüllt sind, wird beim Aktualisieren auch arr[0][0]der Wert von arr[1][0]geändert. Dies kann zu sehr schwerwiegenden und dunklen Problemen führen, wenn Sie dieses Array als Cache-Tabelle verwenden.
Kaihua
@Kaihua Ich bin neu in JavaScript, habe aber den von Kamil Kiełczewski unten bereitgestellten Druckformatcode verwendet, und es gibt kein Problem mit Abhinavs Lösung. Wenn ein Element geändert wird, werden keine Änderungen an anderen Elementen vorgenommen. Ich nehme an, Ihr Kommentar ist ein Analogon zu flachen Kopien in Python, aber das ist hier nicht der Fall.
Yamex5
@ Kaihua, ich verstehe nicht, wie ist dieser Verweis auf das gleiche Array. Wenn Sie ein Array mit 5 Elementen erstellen ( new Array(5)) und es mit einem neu erstellten Array ( new Array(4)) füllen ?! Bedeutet das nicht new Array(), dass Sie kein neues Array mehr erstellen?! Was ist los mit JS?!
Ramzan Chasygov
@ RamzanChasygov Sprachen können je nach Kontext unvollkommen sein = D
Kaihua
31

ES6

Matrix mmit Zeilen und 5 Spalten der Größe 3 (entfernen, .fill(0)um nicht um Null zu initiieren)

[...Array(3)].map(x=>Array(5).fill(0))       

Kamil Kiełczewski
quelle
@ AndrewBenjamin - wo genau liegt das Problem - können Sie es beschreiben oder einen Testfall bereitstellen?
Kamil Kiełczewski
Nun, ich habe Ihren Code kopiert und es gab Fehler, als ich versuchte, zufällig auf Werte im Array zuzugreifen. Eine winzige Modifikation hat jedoch funktioniert: Array <number []> (n + 1) .fill (Array <number> (m + 1) .fill (0))
AndrewBenjamin
Und da du mich in die richtige Richtung geschickt hast und ich deinen Stil mag ... positiv ... obwohl ich nicht sicher bin, warum du so codierst, wie es ist, hat es für mich nicht ganz funktioniert. Ohne das Typoskript-Casting zu beachten, ist die einzige Änderung "Füllen" anstelle von "Karte"
AndrewBenjamin
Ich glaube, ich weiß, was schief gelaufen ist. Ich habe das erste Array versehentlich als <Nummer> anstelle von <Nummer []> umgewandelt, nachdem ich Ihr Skript kopiert und eingefügt habe. Also mein schlechtes.
AndrewBenjamin
26

Wenn Sie in der Lage sein möchten, auf die Matrix wie folgt zuzugreifen, Matrix [i] [j]

Ich finde es am bequemsten, es in einer Schleife zu initiieren.

var matrix = [],
    cols = 3;

//init the grid matrix
for ( var i = 0; i < cols; i++ ) {
    matrix[i] = []; 
}

dies wird dir geben [[], [], []]

Daher gibt Matrix [0] [0] Matrix [1] [0] undefiniert zurück und nicht den Fehler "Nicht erfasster Typfehler: Eigenschaft '0' von undefiniert kann nicht festgelegt werden."

Lorenzo Gangi
quelle
10

Sie können ein Array mithilfe der Kurzschrift-Syntax in einem anderen verschachteln:

   var twoDee = [[]];
Kevin Bowersox
quelle
5

Sie können so etwas ausprobieren: -

var arr = new Array([]);

Daten pushen:

arr[0][0] = 'abc xyz';
Rahul Tripathi
quelle
7
arr[1][0]=3=>Uncaught TypeError: Cannot set property '0' of undefined
Kamil Kiełczewski
4

Ein leeres Array wird definiert, indem Werte wie folgt weggelassen werden:

v=[[],[]]
a=[]
b=[1,2]
a.push(b)
b==a[0]
UIlrvnd
quelle
2

Sie können ein Array mit Arrays füllen, indem Sie eine Funktion verwenden:

var arr = [];
var rows = 11;
var columns = 12;

fill2DimensionsArray(arr, rows, columns);

function fill2DimensionsArray(arr, rows, columns){
    for (var i = 0; i < rows; i++) {
        arr.push([0])
        for (var j = 0; j < columns; j++) {
            arr[i][j] = 0;
        }
    }
}

Das Ergebnis ist:

Array(11)
0:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
1:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
2:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
3:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
4:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
5:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
6:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
7:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
8:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
9:(12) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
10:(12)[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

entoniperez
quelle
1

Erstellen Sie ein Objekt und verschieben Sie dieses Objekt in ein Array

 var jSONdataHolder = function(country, lat, lon) {

    this.country = country;
    this.lat = lat;
    this.lon = lon;
}

var jSONholderArr = [];

jSONholderArr.push(new jSONdataHolder("Sweden", "60", "17"));
jSONholderArr.push(new jSONdataHolder("Portugal", "38", "9"));
jSONholderArr.push(new jSONdataHolder("Brazil", "23", "-46"));

var nObj = jSONholderArr.length;
for (var i = 0; i < nObj; i++) {
   console.log(jSONholderArr[i].country + "; " + jSONholderArr[i].lat + "; " + 
   jSONholderArr[i].lon);

}
Björn Hallström
quelle
1
const grid = Array.from(Array(3), e => Array(4));

Array.from(arrayLike, mapfn)

mapfnwird aufgerufen, der Wert übergeben undefined, zurückgegeben new Array(4).

Ein Iterator wird erstellt und der nextWert wird wiederholt aufgerufen. Der zurückgegebene Wert von next, next().valueist undefined. Dieser Wert undefinedwird dann an den Iterator des neu erstellten Arrays übergeben. Jede Iteration valueist undefined, was Sie sehen können, wenn Sie sie protokollieren.

var grid2 = Array.from(Array(3), e => {
  console.log(e); // undefined
  return Array(4); // a new Array.
});
Garrett
quelle
Bitte fügen Sie eine Beschreibung hinzu, wie und warum dies funktioniert. Ihre Antwort sollte es anderen Benutzern ermöglichen, daraus zu lernen.
David
1

Ich weiß, dass dies ein alter Thread ist, aber ich würde array of objectseher vorschlagen, einen als einen zu verwenden array of arrays. Ich denke, es macht den Code einfacher zu verstehen und zu aktualisieren.

// Use meaningful variable names like 'points', 
// anything better than a bad pirate joke, 'arr'!
var points = [];

// Create an object literal, then add it to the array
var point = {x: 0, y: 0};
points.push(point);

// Create and add the object to the array in 1 line
points.push({x:5, y:5});

// Create the object from local variables 
var x = 10;
var y = 8;
points.push({x, y});

// Ask the user for a point too
var response = prompt("Please enter a coordinate point. Example: 3,8");
var coords = response.split(",").map(Number);
points.push({x: coords[0], y: coords[1]});

// Show the results
var canvas = document.getElementById('graph');
var painter = canvas.getContext("2d");
var width = canvas.width, height = canvas.height;
var scale = 10, radius = 3.5, deg0 = 0, deg360 = 2 * Math.PI;

painter.beginPath();
for (var point of points) {
    var x = point.x * scale + scale;
    var y = height - point.y * scale - scale;
    painter.moveTo(x + radius, y);
    painter.arc(x, y, radius, deg0, deg360);
    painter.fillText(`${point.x}, ${point.y}`, x + radius + 1, y + radius + 1);
}
painter.stroke();
<canvas id="graph" width="150" height="150" style="border: 1px solid red;"></canvas>

sdphm80
quelle
0

Was ist falsch mit

var arr2 = new Array(10,20);
    arr2[0,0] = 5;
    arr2[0,1] = 2
    console.log("sum is   " + (arr2[0,0] +  arr2[0,1]))

sollte auslesen "Summe ist 7"

MadHaka
quelle
4
Jetzt einstellen arr2[1,0]=4. console.log("sum is " + (arr2[0,0] + arr2[0,1]))dann gibt "Summe ist 6". Sie haben nicht wirklich ein zweidimensionales Array erstellt, sondern ein einfaches Array mit den Einträgen "10" und "20". Wenn Sie versuchen, mit durch Kommas getrennten Indizes auf Einträge zuzugreifen, wird hier wirklich beschrieben, was Sie wirklich tun: stackoverflow.com/questions/7421013/…
Daniel
0

Wenn wir ES2015 nicht verwenden und fill () nicht haben, verwenden Sie einfach .apply()

Siehe https://stackoverflow.com/a/47041157/1851492

let Array2D = (r, c, fill) => Array.apply(null, new Array(r)).map(function() {return Array.apply(null, new Array(c)).map(function() {return fill})})

console.log(JSON.stringify(Array2D(3,4,0)));
console.log(JSON.stringify(Array2D(4,5,1)));

Allenyllee
quelle
0

Sie müssen nicht so viel Ärger machen! Es ist einfach

Dadurch wird eine 2 * 3-String-Matrix erstellt.

var array=[];
var x = 2, y = 3;
var s = 'abcdefg';

for(var i = 0; i<x; i++){
    array[i]=new Array();
      for(var j = 0; j<y; j++){
         array[i].push(s.charAt(counter++));
        }
    }
Gyan Satapathy
quelle
0

var arr = [];
var rows = 3;
var columns = 2;

for (var i = 0; i < rows; i++) {
    arr.push([]); // creates arrays in arr
}
console.log('elements of arr are arrays:');
console.log(arr);

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < columns; j++) {
        arr[i][j] = null; // empty 2D array: it doesn't make much sense to do this
    }
}
console.log();
console.log('empty 2D array:');
console.log(arr);

for (var i = 0; i < rows; i++) {
    for (var j = 0; j < columns; j++) {
        arr[i][j] = columns * i + j + 1;
    }
}
console.log();
console.log('2D array filled with values:');
console.log(arr);

Zsolt Ventilla
quelle
-1

Einzeilige Lösung:

var x = 3, y = 4;

var ar = new Array(x).fill(new Array(y).fill(0));

Es wird ein Matrixarray mit Werten = 0 erstellt

Eduard
quelle
Das Problem bei dieser Lösung ist, dass jede Zeile dasselbe Array enthält. Wenn Sie festlegen, enthält ar[1][2] = 1jede Zeile [0, 0, 1, 0].
MrMartiniMo
-2

Wir kennen normalerweise die Anzahl der Spalten, aber möglicherweise nicht die Zeilen (Datensätze). Hier ist ein Beispiel für meine Lösung, bei der ein Großteil der oben genannten Funktionen verwendet wird. (Für diejenigen, die hier mehr Erfahrung mit JS haben als ich - so ziemlich jeder - sind Vorschläge zur Codeverbesserung willkommen.)

     var a_cols = [null,null,null,null,null,null,null,null,null];
     var a_rxc  = [[a_cols]];

     // just checking  var arr =  a_rxc.length ; //Array.isArray(a_rxc);
     // alert ("a_rxc length=" + arr) ; Returned 1 
     /* Quick test of array to check can assign new rows to a_rxc. 
        i can be treated as the rows dimension and  j the columns*/
       for (i=0; i<3; i++) {
          for (j=0; j<9; j++) {
            a_rxc[i][j] = i*j;
            alert ("i=" + i + "j=" + j + "  "  + a_rxc[i][j] );
           }
          if (i+1<3) { a_rxc[i+1] = [[a_cols]]; }
        }

Und wenn Sie dieses Array an den Server übergeben, ist der Ajax, der für mich funktioniert

 $.post("../ajax/myservercode.php",
       {
        jqArrArg1 : a_onedimarray,
        jqArrArg2 : a_rxc
       },
       function(){  },"text" )
        .done(function(srvresp,status) { $("#id_PageContainer").html(srvresp);} ) 
        .fail(function(jqXHR,status) { alert("jqXHR AJAX error " + jqXHR + ">>" + status );} );
GMC
quelle
-4

// für 3 x 5 Array

new Array(3).fill(new Array(5).fill(0))
Leannez
quelle
6
Funktioniert nicht. Jedes Element in der ersten Dimension enthält einen Verweis auf dasselbe sekundäre Array. Also a [0] [y] === a [1] [y] === a [2] [y], was Ihnen einige seltsame Ergebnisse garantiert.
Franck Jeannin