Vraag Hoe loop ik een JavaScript-object door of noteer ik een object?


Ik heb een JavaScript-object zoals het volgende:

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

Nu wil ik alles doorlopen p elementen (p1,p2,p3...) en hun sleutels en waarden krijgen. Hoe kan ik dat doen?

Ik kan het JavaScript-object indien nodig aanpassen. Mijn ultieme doel is om door enkele belangrijke waardeparen te lopen en indien mogelijk wil ik vermijden om te gebruiken eval.


2129
2018-03-26 06:01


oorsprong


antwoorden:


U kunt de for-in loop zoals getoond door anderen. U moet er echter ook voor zorgen dat de sleutel die u krijgt een werkelijke eigenschap van een object is en niet afkomstig is van het prototype.

Hier is het fragment:

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

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


3460
2018-03-26 06:12



Onder ECMAScript 5 kunt u combineren Object.keys() en Array.prototype.forEach():

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

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

ES6 voegt eraan toe for...of:

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

ES2017 voegt toe Object.entries() waarbij wordt vermeden dat elke waarde in het oorspronkelijke object moet worden opgezocht:

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

Beide Object.keys() en Object.entries() itereer eigenschappen in dezelfde volgorde als a for...in lus maar negeer de prototypeketen. Alleen de eigen opsombare eigenschappen van het object worden geïtereerd.

Bewerken: ES2016 → ES6


621
2018-04-20 21:59



Je moet de gebruiken for-in loop

Maar wees heel voorzichtig wanneer je dit soort lus gebruikt, want dit zal loop alle eigenschappen langs de prototypeketen.

Gebruik daarom altijd bij gebruik van for-in loops altijd de hasOwnProperty methode om te bepalen of de huidige eigenschap in iteratie echt een eigenschap is van het object dat u controleert:

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



De vraag zal niet compleet zijn als we niets zeggen over alternatieve methoden voor het doorlussen van objecten.

Tegenwoordig bieden veel bekende JavaScript-bibliotheken hun eigen methoden voor het itereren van verzamelingen, d.w.z. over arrays, voorwerpen, en array-achtige objecten. Deze methoden zijn handig in gebruik en zijn volledig compatibel met elke browser.

  1. Als je werkt jQuery, je mag gebruiken jQuery.each() methode. Het kan worden gebruikt om naadloos over zowel objecten als arrays te itereren:

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. In Underscore.js je kunt methode vinden _.each(), die itereert over een lijst met elementen, waarbij elk op zijn beurt weer een bijgeleverde functie oplevert (let op de volgorde van argumenten in iteratee functie!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash biedt verschillende methoden voor het itereren van objecteigenschappen. basis- _.forEach() (of het is alias _.each()) is handig voor het doorlussen van beide objecten en arrays, maar (!) objecten met length eigenschappen worden behandeld als arrays en om dit gedrag te voorkomen, wordt aangeraden om deze te gebruiken _.forIn() en _.forOwn() methoden (deze hebben ook value argument komt als eerste):

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

    _.forIn() itereert eigen en geërfd opsombare eigenschappen van een object, terwijl _.forOwn() itereert alleen voorbij eigen eigenschappen van een object (in feite controleren tegen hasOwnProperty functie). Voor eenvoudige objecten en objectliteralen werkt elk van deze methoden prima.

Over het algemeen hebben alle beschreven methoden hetzelfde gedrag met alle geleverde objecten. Naast het gebruik van native for..in loop zal meestal zijn sneller dan enige abstractie, zoals jQuery.each(), deze methoden zijn aanzienlijk eenvoudiger in gebruik, vereisen minder codering en bieden een betere foutafhandeling.


230
2018-01-20 17:58



In ECMAScript 5 heb je een nieuwe benadering in iteratie velden van letterlijke - Object.keys

Meer informatie die u kunt zien op MDN

Mijn keuze is hieronder als een snellere oplossing in de huidige versies van browsers (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;
}

U kunt de prestaties van deze aanpak vergelijken met verschillende implementaties jsperf.com:

Browserondersteuning die u kunt zien Kangax's compatibele tafel

Voor de oude browser die je hebt eenvoudig en vol polyfill

UPD:

prestatievergelijking voor alle meest voorkomende gevallen in deze vraag perfjs.info:

object letterlijke iteratie


47
2017-11-16 19:59



Je kunt het gewoon herhalen zoals:

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

Let daar op key neemt niet de waarde van het eigendom over, het is gewoon een indexwaarde.


30
2018-03-26 06:05



Aangezien es2015 steeds populairder wordt, post ik dit antwoord, inclusief het gebruik van de generator en iterator om probleemloos door te werken [key, value] paren. Zoals het mogelijk is in andere talen, bijvoorbeeld Ruby.

Ok hier is een code:

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

Alle informatie over hoe u een iterator en generator kunt maken die u kunt vinden op de ontwikkelaar Mozilla-pagina.

Hoop dat het iemand heeft geholpen.

BEWERK:

ES2017 zal omvatten Object.entries wat ervoor zorgt dat het itereert [key, value] paren in objecten nog eenvoudiger. Het is nu bekend dat het een onderdeel zal zijn van een standaard volgens de TS39 podium informatie.

Ik denk dat het tijd is om mijn antwoord te updaten om het nog frisser te laten worden dan het nu is.

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

U kunt meer informatie vinden over het gebruik MDN pagina


24
2017-08-27 09:06



via prototype met forEach () welke de prototypeketting eigenschappen:

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



Na het doorlopen van alle antwoorden hier, is hasOwnProperty niet vereist voor mijn eigen gebruik omdat mijn json-object schoon is; het heeft geen zin om extra JavaScript-verwerking toe te voegen. Dit is alles wat ik gebruik:

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

14
2017-08-18 20:50