Ciascuno per oggetto?

Question

Eventuali duplicati:
Iterate over Object Literal Values

ho oggetto in JavaScript:

var object = someobject; 

Object { aaa=true, bbb=true, ccc=true } 

Come posso utilizzare ciascuno per questo?

object.each(function(index, value)) { 
     console.log(value); 
} 

Non funziona.

Answer 1

Un oggetto javascript non ha una funzione standard .each. jQuery fornisce una funzione. Vedere http://api.jquery.com/jQuery.each/ Il sotto dovrebbe funzionare

$.each(object, function(index, value) { 
    console.log(value); 
}); 

Un'altra opzione sarebbe quella di utilizzare la vaniglia JavaScript utilizzando il Object.keys() e l'Array .map() funzioni come questo

Object.keys(object).map(function(objectKey, index) { 
    var value = object[objectKey]; 
    console.log(value); 
}); 

Vedi https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keys e https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Questi sono di solito meglio che usare un Javascript for-loop vanilla, a meno che tu non comprenda veramente le implicazioni dell'uso di un normale ciclo for e veda l'uso per il suo specifico caratteristiche come il looping sulla catena di proprietà.

Di solito, un ciclo for non funziona meglio di jQuery o Object.keys().map(). Vado in due potenziali problemi con l'utilizzo di un ciclo for di seguito.

---

Giusto, quindi ha anche sottolineato in altre risposte, una pianura Javascript alternativa sarebbe

for(var index in object) { 
    var attr = object[index]; 
} 

Ci sono due potenziali problemi con questo:

1. Si desidera verificare se l'attributo che si sta trovando proviene dall'oggetto stesso e non dalla catena del prototipo. Questo può essere controllato con la funzione hasOwnProperty in questo modo

for(var index in object) { 
    if (object.hasOwnProperty(index)) { 
     var attr = object[index]; 
    } 
} 

Vedi https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty per ulteriori informazioni.

Le funzioni jQuery.each e Object.keys si occupano automaticamente di questo.

2. Un altro potenziale problema con un ciclo for-plain è quello di scope e non-closures. Questo è un po 'complicato, ma prendi ad esempio il seguente codice. Abbiamo un sacco di pulsanti con ids Button0, button1, button2 ecc, e vogliamo impostare un onclick su di loro e fare un console.log come questo:

<button id='button0'>click</button> 
<button id='button1'>click</button> 
<button id='button2'>click</button> 

var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"]; 
for(var buttonId in messagesByButtonId) { 
    if (messagesByButtonId.hasOwnProperty(buttonId)) { 
     $('#'+buttonId).click(function() { 
      var message = messagesByButtonId[buttonId]; 
      console.log(message); 
     }); 
    } 
} 

Se, dopo qualche tempo, si clicca uno dei pulsanti avremo sempre "cliccato per ultimo!" nella console e mai "cliccato prima!" o "clickato medio!". Perché?Perché nel momento in cui viene eseguita la funzione onclick, verrà visualizzato messagesByButtonId[buttonId] utilizzando la variabile buttonIdin quel momento. E poiché il ciclo è terminato in quel momento, la variabile buttonId sarà ancora "button2" (il valore che aveva durante l'ultima iterazione del ciclo), e quindi messagesByButtonId[buttonId] sarà messagesByButtonId["button2"], cioè "ha fatto clic per ultimo!".

Vedere https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures per ulteriori informazioni sulle chiusure. Soprattutto l'ultima parte di quella pagina che copre il nostro esempio.

Ancora, jQuery.each e Object.keys().map() risolvere questo problema automaticamente per noi, perché ci fornisce un function(index, value) (che ha chiusura) e quindi abbiamo sono sicuri da usare sia indice e valore e certi che hanno il valore che ci aspettiamo.

Answer 2

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

Answer 3

var object = { "a": 1, "b": 2}; 
 
$.each(object, function(key, value){ 
 
    console.log(key + ": " + object[key]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

//output 
a: 1 
b: 2