JavaScript-Foreach-Schleife für ein assoziatives Array-Objekt

Warum iteriert meine for for-each-Schleife nicht über mein assoziatives Array-Objekt in JavaScript?

// Defining an array
var array = [];

// Assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";

// Expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

jQuery each() könnte hilfreich sein: https://api.jquery.com/jQuery.each/

Das .length property verfolgt nur Eigenschaften mit numerischen Indizes (Schlüsseln). Sie verwenden Zeichenfolgen für Schlüssel.

Du kannst das:

var arr_jq_TabContents = {}; // no need for an array

arr_jq_TabContents["Main"] = jq_TabContents_Main;
arr_jq_TabContents["Guide"] = jq_TabContents_Guide;
arr_jq_TabContents["Articles"] = jq_TabContents_Articles;
arr_jq_TabContents["Forum"] = jq_TabContents_Forum;

for (var key in arr_jq_TabContents) {
    console.log(arr_jq_TabContents[key]);
}

Sicherheitshalber ist es eine gute Idee, in solchen Schleifen sicherzustellen, dass keine der Eigenschaften unerwartete Ergebnisse der Vererbung sind:

for (var key in arr_jq_TabContents) {
  if (arr_jq_TabContents.hasOwnProperty(key))
    console.log(arr_jq_TabContents[key]);
}

bearbeiten – Es ist wahrscheinlich eine gute Idee, jetzt zu bemerken, dass die Object.keys() Funktion ist in modernen Browsern und in Node usw. verfügbar. Diese Funktion gibt die “eigenen” Schlüssel eines Objekts als Array zurück:

Object.keys(arr_jq_TabContents).forEach(function(key, index) {
  console.log(this[key]);
}, arr_jq_TabContents);

Die Callback-Funktion, an die übergeben wird .forEach() wird mit jedem Schlüssel aufgerufen und der Index des Schlüssels im Array wird von zurückgegeben Object.keys(). Es wird auch das Array übergeben, durch das die Funktion iteriert, aber dieses Array ist für uns nicht wirklich nützlich; Wir brauchen das Original Objekt. Darauf kann direkt über den Namen zugegriffen werden, aber (meiner Meinung nach) ist es etwas schöner, es explizit zu übergeben, was durch die Übergabe eines zweiten Arguments an erreicht wird .forEach() — das ursprüngliche Objekt — das als gebunden wird this innerhalb des Rückrufs. (Ich habe gerade gesehen, dass dies in einem Kommentar unten vermerkt wurde.)

Dies ist ein sehr einfacher Ansatz. Das Vorteil können Sie auch Schlüssel bekommen:

for (var key in array) {
    var value = array[key];
    console.log(key, value);
}

Für ES6:

array.forEach(value => {
  console.log(value)
})

Für ES6 (wenn Sie den Wert, den Index und das Array selbst möchten):

array.forEach((value, index, self) => {
  console.log(value, index, self)
})

Wenn Node.js oder der Browser unterstützen Object.entries()kann es als Alternative zu using verwendet werden Object.keys() (Pointys Antwort).

const h = {
  a: 1,
  b: 2
};

Object.entries(h).forEach(([key, value]) => console.log(value));
// logs 1, 2

In diesem Beispiel forEach Verwendet destrukturierende Aufgabe eines Arrays.

Es gibt bereits einige einfache Beispiele, aber ich merke, wie Sie Ihre Frage formuliert haben, dass Sie wahrscheinlich einen PHP-Hintergrund haben und erwarten, dass JavaScript auf die gleiche Weise funktioniert – das tut es nicht. Ein PHP array unterscheidet sich sehr von einem JavaScript Array.

In PHP kann ein assoziatives Array das meiste leisten, was ein numerisch indiziertes Array kann (die array_* Funktionen funktionieren, können Sie count() es usw.). Sie erstellen einfach ein Array und beginnen mit der Zuweisung an String-Indizes anstelle von numerischen.

In JavaScript ist alles ein Objekt (mit Ausnahme von Primitives: String, Numeric, Boolean), und Arrays sind eine bestimmte Implementierung, mit der Sie numerische Indizes haben können. Alles, was in ein Array geschoben wird, wirkt sich auf dieses aus lengthund kann mit Array-Methoden (map, forEach, reduce, filter, findusw.) Da jedoch alles ein Objekt ist, können Sie jederzeit einfach Eigenschaften zuweisen, da Sie dies jedem Objekt tun können. Die Notation mit eckigen Klammern ist einfach eine andere Möglichkeit, auf eine Eigenschaft zuzugreifen, also in Ihrem Fall:

array['Main'] = 'Main Page';

ist eigentlich gleichbedeutend mit:

array.Main = 'Main Page';

Aus Ihrer Beschreibung geht hervor, dass Sie ein “assoziatives Array” wünschen, aber für JavaScript ist dies ein einfacher Fall der Verwendung eines Objekts als Hashmap. Ich weiß auch, dass es sich um ein Beispiel handelt, aber vermeiden Sie bedeutungslose Namen, die nur den Variablentyp beschreiben (z array) und einen Namen, der darauf basiert, was er enthalten soll (z pages). Einfache Objekte haben nicht viele gute direkte Möglichkeiten zum Iterieren, daher werden wir sie oft zuerst in Arrays umwandeln Object Methoden (Object.keys in diesem Fall – gibt es auch entries und values wird gerade einigen Browsern hinzugefügt), die wir wiederholen können.

// Assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));

arr_jq_TabContents[key] sieht das Array als eine 0-Index-Form.

Hier ist eine einfache Möglichkeit, ein assoziatives Array als generischen Objekttyp zu verwenden:

Object.prototype.forEach = function(cb){
   if(this instanceof Array) return this.forEach(cb);
   let self = this;
   Object.getOwnPropertyNames(this).forEach(
      (k)=>{ cb.call(self, self[k], k); }
   );
};

Object({a:1,b:2,c:3}).forEach((value, key)=>{ 
    console.log(`key/value pair: ${key}/${value}`);
});

Dies ist in den meisten Fällen (im Wesentlichen) falsch:

var array = [];
array["Main"] = "Main page";

Dadurch wird eine Nicht-Element-Eigenschaft für das Array mit dem Namen erstellt Main. Obwohl Arrays Objekte sind, möchten Sie normalerweise keine Nicht-Element-Eigenschaften für sie erstellen.

Wenn Sie indizieren möchten array Bei diesen Namen würden Sie normalerweise a verwenden Map oder ein einfaches Objekt, kein Array.

Mit einer Map (ES2015+), die ich nennen werde map weil ich kreativ bin:

let map = new Map();
map.set("Main", "Main page");

Sie iterieren es dann mit den Iteratoren von its values, keysoder entries Methoden, zum Beispiel:

for (const value of map.values()) {
    // Here, `value` will be `"Main page"`, etc.
}

Verwenden eines einfachen Objekts, das ich kreativ nennen werde obj:

let obj = Object.create(null); // Creates an object with no prototype
obj.Main = "Main page"; // Or: `obj["Main"] = "Main page";`

Sie würden dann seinen Inhalt mit iterieren Object.keys, Object.valuesoder Object.entrieszum Beispiel:

for (const value of Object.values(proches_X)) {
    // Here, `value` will be `"Main page"`, etc.
}