Domanda Come faccio a scorrere o enumerare un oggetto JavaScript?


Ho un oggetto JavaScript simile al seguente:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Ora voglio scorrere tutto p elementi (p1,p2,p3...) e ottenere le loro chiavi e valori. Come lo posso fare?

Posso modificare l'oggetto JavaScript se necessario. Il mio obiettivo finale è quello di scorrere alcune coppie di valori chiave e, se possibile, voglio evitare di usare eval.


2129
2018-03-26 06:01


origine


risposte:


Puoi usare il for-in loop come mostrato da altri. Tuttavia, devi anche assicurarti che la chiave che ottieni sia una proprietà reale di un oggetto e che non provenga dal prototipo.

Ecco il frammento:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}


3459
2018-03-26 06:12



Sotto ECMAScript 5, puoi combinare Object.keys() e Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };

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

ES6 aggiunge for...of:

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ES2017 aggiunge Object.entries() che evita di dover cercare ogni valore nell'oggetto originale:

Object.entries(obj).forEach(
    ([key, value]) => console.log(key, value)
);

Entrambi Object.keys() e Object.entries() iterare le proprietà nello stesso ordine di a for...in ciclo continuo ma ignorare la catena del prototipo. Solo le proprietà enumerabili dell'oggetto vengono iterate.

Modifica: ES2016 → ES6


620
2018-04-20 21:59



Devi usare il ciclo for-in

Ma stai molto attento quando usi questo tipo di loop, perché così sarà loop tutte le proprietà lungo la catena del prototipo.

Pertanto, quando si usano i loop for-in, utilizzare sempre il hasOwnProperty metodo per determinare se la proprietà corrente in iterazione è realmente una proprietà dell'oggetto che stai controllando:

for (var prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

300
2018-03-26 06:12



La domanda non sarà completa se non menzioniamo i metodi alternativi per il looping degli oggetti.

Al giorno d'oggi molte librerie JavaScript ben note forniscono i propri metodi per iterare su collezioni, vale a dire sopra array, oggetti, e oggetti tipo array. Questi metodi sono convenienti da usare e sono completamente compatibili con qualsiasi browser.

  1. Se lavori con jQuery, Puoi usare jQuery.each() metodo. Può essere usato per iterare senza interruzioni su entrambi gli oggetti e gli array:

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. In Underscore.js puoi trovare il metodo _.each(), che scorre su un elenco di elementi, cedendo ciascuno a sua volta a una funzione fornita (prestare attenzione all'ordine degli argomenti in iteratee funzione!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash fornisce diversi metodi per iterare sulle proprietà dell'oggetto. Di base _.forEach() (o è un alias _.each()) è utile per il looping tra oggetti e array, tuttavia (!) oggetti con length le proprietà vengono trattate come array e per evitare questo comportamento è consigliabile utilizzarle _.forIn() e _.forOwn() metodi (anche questi hanno value argomento in arrivo prima):

    _.forIn(obj, function(value, key) {
        console.log(key, value);
    });
    

    _.forIn() itera sopra proprio ed ereditato proprietà enumerabili di un oggetto, mentre _.forOwn() itera solo sopra proprio proprietà di un oggetto (fondamentalmente controllando contro hasOwnProperty funzione). Per oggetti semplici e letterali oggetto qualsiasi di questi metodi funzionerà correttamente.

Generalmente tutti i metodi descritti hanno lo stesso comportamento con qualsiasi oggetto fornito. Oltre ad usare nativo for..in il ciclo sarà di solito Più veloce di qualsiasi astrazione, come jQuery.each(), questi metodi sono notevolmente più facili da usare, richiedono meno codice e offrono una migliore gestione degli errori.


230
2018-01-20 17:58



In ECMAScript 5 hai un nuovo approccio nei campi di iterazione letterale - Object.keys

Maggiori informazioni puoi vedere su MDN

Di seguito la mia scelta è una soluzione più rapida nelle versioni correnti dei browser (Chrome30, IE10, FF25)

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i += 1;
}

Puoi confrontare le prestazioni di questo approccio con diverse implementazioni su jsperf.com:

Supporto del browser che puoi vedere La tavoletta di Kangax

Per il vecchio browser che hai semplice e pieno polyfill

UPD:

confronto delle prestazioni per tutti i casi più popolari in questa domanda perfjs.info:

oggetto letterale iterazione


47
2017-11-16 19:59



Puoi semplicemente scorrere su di esso come:

for (var key in p) {
  alert(p[key]);
}

Nota che key non assumerà il valore della proprietà, è solo un valore di indice.


30
2018-03-26 06:05



Poiché es2015 sta diventando sempre più popolare sto postando questa risposta che include l'uso di generatore e iteratore per scorrere uniformemente attraverso [key, value] accoppiamenti. Come è possibile in altre lingue, ad esempio Ruby.

Ok ecco un codice:

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
  [Symbol.iterator]: function* () {
    for (const i of Object.keys(this)) {
      yield [i, this[i]];
    }
  }
};

for (const [k, v] of MyObject) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Tutte le informazioni su come puoi fare un iteratore e un generatore che puoi trovare nella pagina Mozilla dello sviluppatore.

Spero che abbia aiutato qualcuno.

MODIFICARE:

ES2017 includerà Object.entries che farà scorrere [key, value] coppie in oggetti ancora più facili. Ora è noto che farà parte di uno standard secondo il TS39 informazioni sul palco.

Penso che sia ora di aggiornare la mia risposta per farla diventare ancora più fresca di adesso.

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
};

for (const [k, v] of Object.entries(MyObject)) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Puoi trovare ulteriori informazioni sull'utilizzo su MDN pagina


24
2017-08-27 09:06



attraverso prototipo con per ciascuno() che dovrebbe saltare il catena prototipo proprietà:

Object.prototype.each = function(f) {
    var obj = this
    Object.keys(obj).forEach( function(key) { 
        f( key , obj[key] ) 
    });
}


//print all keys and values
var obj = {a:1,b:2,c:3}
obj.each(function(key,value) { console.log(key + " " + value) });
// a 1
// b 2
// c 3

17
2017-12-09 05:05



HasOwnProperty, dopo aver esaminato tutte le risposte, non è necessario per il mio utilizzo perché il mio oggetto json è pulito; non ha davvero senso aggiungere ulteriori elaborazioni javascript. Questo è tutto ciò che sto usando:

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}

14
2017-08-18 20:50