JavaScript Multidimensional Arrays

Question

Dies war nicht die Frage, die ich stellen wollte, aber ich bin unerwartet mit JavaScript-Arrays gestrandet. Ich komme aus einem PHP-Hintergrund und nachdem ich ein paar Webseiten angeschaut habe, bin ich nicht klüger.

Ich versuche, ein mehrdimensionales Array zu erstellen.

var photos = new Array; 
var a = 0; 
$("#photos img").each(function(i) { 
    photos[a]["url"] = this.src; 
    photos[a]["caption"] = this.alt; 
    photos[a]["background"] = this.css('background-color'); 
    a++; 
}); 

Fehlermeldung: Fotos [a] ist undefiniert. Wie mache ich das? Vielen Dank.

Answer 1

JavaScript verfügt nicht über mehrdimensionale Arrays, sondern Arrays von Arrays, die auf ähnliche Weise verwendet werden können.

Möglicherweise möchten Sie folgendes versuchen:

var photos = []; 
var a = 0; 
$("#photos img").each(function(i) { 
    photos[a] = []; 
    photos[a]["url"] = this.src; 
    photos[a]["caption"] = this.alt; 
    photos[a]["background"] = this.css('background-color'); 
    a++; 
}); 

Beachten Sie, dass new Array() statt [] genutzt haben könnte, aber diese wird generell empfohlen. Beachten Sie auch, dass Ihnen in der ersten Zeile die Klammer new Array() fehlte.

---

UPDATE: aus den Kommentaren unten folgend, in dem obigen Beispiel gibt es keine Notwendigkeit Arrays von Arrays zu verwenden. Ein Array von Objekten wäre angemessener gewesen. Der Code ist immer noch gültig, da Arrays Objekte in dieser Sprache sind, aber die folgenden wäre besser gewesen:

photos[a] = {}; 
photos[a]["url"] = this.src; 
photos[a]["caption"] = this.alt; 
photos[a]["background"] = this.css('background-color'); 

Answer 2

multidimensionalen Arrays sind in dieser Struktur:

var photos = new Array(); 
photos[0] = new Array(); 

es verwenden wie:

photos[0][0] = this.src; 

mehr auf JS-Array here.

Answer 3

Douglas Crockford, von JSLint, würden Sie es auf diese Art und Weise ("Verwenden Sie die Arrayliteral Notation []") haben erstellen:

var photos = []; 

Jetzt nicht vergessen, dass Sie erstellen möchten multidimensionalen Arrays, was ein Array innerhalb eines Arrays bedeutet. Dies bedeutet, dass Sie die Innen-Arrays erstellen müssen:

$("#photos img").each(function(i) { 
    photos[a] = [] 
    //continue 

Answer 4

var photos = []; 
var imgs = document.getElementById("photos").getElementsByTagName("img"); 
for(var i=0;i<imgs.length;i++){ 
    photos.push({ 
     src:imgs[i].src, 
     alt:imgs[i].alt, 
     background:imgs[i].style.backgroundColor 
    }); 
} 

Das sollte Ihnen etwas geben, die dies in PHP entspricht in etwa (I aus pretend Daten):

Array(
    [0] => Array(
     "src" => "logo.png", 
     "alt" => "My Logo!", 
     "background" => "#ffffff" 
    ) 
) 

I hoffe das hilft!

Answer 5

Sie versuchen, photos[a]["url"], photos[a]["caption"] usw. etwas zuzuweisen, aber photos[a] existiert noch nicht. photos ist zunächst ein leeres Array, also müssen Sie zunächst photos[a] auf etwas setzen. Da Sie String-Schlüssel verwenden möchten ("url", "caption", usw.), sollte dieses etwas ein einfaches Objekt sein (das Javascript entspricht php associave-Arrays) (oder ein Hash, wenn Ihre Code-Basis es erlaubt).Dann können Sie ein wörtliches Objekt Konstrukt verwenden, um Ihre Funktion zu vereinfachen und Array#push zu den unnötigen a loszuwerden:

var photos = []; 
$("#photos img").each(function(img) { 
    photos.push({ 
     url: img.src, 
     caption: img.alt, 
     background: img.style.backgroundColor 
    }); 
}); 

Stellen Sie außerdem sicher, dass this ist eigentlich Ihr img Element. Einige each Implementierungen setzen in Ihrem Fall this auf das globale Objekt.

edit: ok, es sieht aus wie jQuery.each automatisch this zum iterativen Element setzt, aber wickeln Sie es nicht in jQuery-Güte, so haben Sie entweder this in $() oder benutzen Sie unformatierten DOM wrap (verwendete ich die letztere in mein Beispiel).

edit2: egal, mit this ist irgendwie komisch, seit die Callback-Funktion an each ein Argument übergeben. Kann dieses Argument auch verwenden (umbenannt).

Answer 6

Als ich diesen Thread gelesen habe, habe ich versucht, mehrdimensionale assoziative Arrays zu verstehen. Es war nicht klar, also habe ich recherchiert, das ist was ich herausgefunden habe:

var images = new Array; 
images['logo'] = { 'src': 'http://example.com/image1.png', 'caption': 'this is the logo', 'background': '#000'}; 
images['background'] = { 'src': 'http://example.com/image2.png', 'caption': 'this is the background', 'background': '#FFF'}; 
alert(images['logo']['src']); /* output: http://example.com/image1.png */ 
alert(images['background']['caption']); /* output: this is the background */ 

Hoffe, das hilft!