Javascript foreach loop sull'oggetto array associativo

Perché il mio ciclo for-each non sta ripetendo il mio oggetto array associativo 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]);
}

EDIT: jQuery each()potrebbe essere utile: https://api.jquery.com/jQuery.each/

La .lengthproprietà tiene traccia solo delle proprietà con indici numerici (chiavi). Stai usando le stringhe per i tasti.

Puoi farlo:

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

Per sicurezza, è una buona idea in cicli del genere per assicurarsi che nessuna delle proprietà sia un risultato inaspettato dell'ereditarietà:

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

modifica - è probabilmente una buona idea ora notare che la Object.keys()funzione è disponibile sui browser moderni e in Nodo ecc. Quella funzione restituisce le chiavi "proprie" di un oggetto, come un array:

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

La funzione di callback passata .forEach()viene chiamata con ogni chiave e l'indice della chiave nell'array restituito da Object.keys(). Ha anche passato l'array attraverso il quale la funzione sta ripetendo, ma quell'array non ci è veramente utile; abbiamo bisogno dell'oggetto originale . È possibile accedervi direttamente per nome, ma (secondo me) è un po 'più bello passarlo esplicitamente, cosa che viene fatta passando un secondo argomento a .forEach()- l'oggetto originale - che verrà associato come thisall'interno del callback. (Ho appena visto che questo è stato notato in un commento qui sotto.)

Questo è un approccio molto semplice. Il vantaggio è che puoi ottenere anche le chiavi:

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

Per ES6:

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

Per ES6: (se si desidera il valore, l'indice e l'array stesso)

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

Ci sono già alcuni esempi chiari, ma noto da come hai formulato la tua domanda che probabilmente provieni da uno sfondo di PHP e ti aspetti che JavaScript funzioni allo stesso modo - non funziona. Un PHP arrayè molto diverso da un JavaScriptArray .

In PHP, un array associativo può fare la maggior parte di ciò che un array indicizzato numericamente (le array_*funzioni funzionano, puoicount() , ecc.) È sufficiente creare un array e iniziare ad assegnare agli indici di stringa invece che numerici.

In JavaScript, tutto è un oggetto (ad eccezione delle primitive: stringa, numerico, booleano) e le matrici sono una certa implementazione che ti consente di avere indici numerici. Qualsiasi cosa spinta a un array avrà effettolength , e può essere iterata con metodi Array ( map, forEach, reduce, filter, find, ecc) Tuttavia, perché tutto è un oggetto, sei sempre libero di semplici proprietà assegnare, perché è qualcosa che si fa per qualsiasi oggetto. La notazione a parentesi quadre è semplicemente un altro modo per accedere a una proprietà, quindi nel tuo caso:

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

è effettivamente equivalente a:

array.Main = 'Main Page';

Dalla tua descrizione, suppongo che tu voglia un "array associativo", ma per JavaScript, questo è un semplice caso di utilizzo di un oggetto come hashmap. Inoltre, so che è un esempio, ma evita i nomi non significativi che descrivono solo il tipo di variabile (ad esempio array) e il nome in base a ciò che dovrebbe contenere (ad esempio pages). Gli oggetti semplici non hanno molti buoni modi diretti per iterare, quindi spesso trasformeremo poi in array prima usando i Objectmetodi ( Object.keysin questo caso - c'è anche entriese valuesvenendo aggiunti ad alcuni browser proprio ora) che possiamo eseguire in loop.

// 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] vede l'array come un modulo 0-index.

Ecco un modo semplice per usare un array associativo come un tipo di oggetto generico:

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

Se il nodo.js o il browser supportato Object.entries(), può essere utilizzato in alternativa all'utilizzo Object.keys()( https://stackoverflow.com/a/18804596/225291 ).

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

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

in questo esempio, forEachutilizza l' assegnazione di Destructuring di un array.

Questo è (essenzialmente) errato nella maggior parte dei casi:

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

Ciò crea una proprietà non element sull'array con il nome Main. Sebbene le matrici siano oggetti, normalmente non si desidera creare su di essi proprietà non elementali.

Se si desidera indicizzare in arraybase a tali nomi, in genere si utilizza uno Mapo un oggetto semplice, non un array.

Con un Map(ES2015 +), che chiamerò mapperché sono creativo:

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

poi iterare utilizzando gli iteratori dai suoi values, keys, o entriesmetodi, per esempio:

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

Usando un oggetto semplice, che chiamerò in modo creativo obj:

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

si sarebbe poi iterare il suo contenuto utilizzando Object.keys, Object.valueso Object.entries, per esempio:

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

var obj = {
  no: ["no", 32],
  nt: ["no", 32],
  nf: ["no", 32, 90]
};

count = -1; // which must be static value
for (i in obj) {
  count++;
  if (obj.hasOwnProperty(i)) {
    console.log(obj[i][count])
  };
};

in questo codice ho usato il metodo parentesi per i valori di chiamata in array perché conteneva array, tuttavia brevemente l'idea che una variabile i abbia una chiave di proprietà e con un ciclo chiamato entrambi i valori dell'array associato

Metodo perfetto, se ti interessa, premi mi piace

Puoi farlo

var array = [];

// assigning values to corresponding keys
array[0] = "Main page";
array[1] = "Guide page";
array[2] = "Articles page";
array[3] = "Forum board";


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