Vraag Itereren door objecteigenschappen


var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    alert(propt + ': ' + obj[propt]);
}

Hoe werkt de variabele propt vertegenwoordigen de eigenschappen van het object? Het is geen ingebouwde methode of eigenschap. Waarom komt het dan met elke eigenschap in het object?


1512
2017-11-29 14:30


oorsprong


antwoorden:


Itereren over eigenschappen vereist dit extra hasOwnProperty controleren:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Dit is nodig omdat het prototype van een object extra eigenschappen voor het object bevat die technisch deel uitmaken van het object. Deze extra eigenschappen worden overgenomen van de klasse van het basisobject, maar zijn nog steeds eigenschappen van object.

hasOwnProperty controleert eenvoudig of dit een eigenschap is die specifiek is voor deze klasse, en niet één die is geërfd van de basisklasse.


2052
2018-05-24 12:38



Vanaf JavaScript 1.8.5 kunt u gebruiken Object.keys(obj) om een ​​array van eigenschappen te krijgen die zijn gedefinieerd op het object zelf (de objecten waarvoor true wordt weergegeven obj.hasOwnProperty(key)).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Dit is beter (en beter leesbaar) dan het gebruik van een for-in-lus.

Het wordt ondersteund door deze browsers:

  • Firefox (Gecko): 4 (2.0)
  • Chrome: 5
  • Internet Explorer: 9

Zien het Mozilla Developer Network Object.keys ()de referentie voor meer informatie.


773
2017-08-13 07:19



Het is de for...in statement (MDN, ECMAScript spec).

Je kunt het lezen als "VOOR elke woning IN de obj object, wijst elke eigenschap toe aan de propt veranderlijk op zijn beurt ".


189
2017-11-29 14:32



Meisjes en jongens zijn we in 2017 en we hebben niet zoveel tijd om te typen ... Dus laten we dit coole nieuwe fancy ECMAScript 2016 doen:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

142
2017-11-22 08:47



In komende versies van ES, kunt u gebruiken Object.entries:

for (const [key, value] of Object.entries(obj)) { }

of

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

Als u alleen de waarden wilt herhalen, gebruikt u Object.values:

for (const value of Object.values(obj)) { }

of

Object.values(obj).forEach(value => ...)

57
2017-09-13 06:41



Het is gewoon een for...in lus. Uitchecken de documentatie bij Mozilla.


37
2017-11-29 14:33



jQuery stelt u in staat om dit nu te doen:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

20
2018-03-29 15:19



De bovenstaande antwoorden zijn een beetje vervelend omdat ze niet uitleggen wat je in de for-lus doet nadat je zeker weet dat het een object is: JE BEREIKT HET NIET DIRECT! U krijgt eigenlijk alleen de sleutel die u op de OBJ moet toepassen:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Dit is allemaal ECMA5-veilig. Werkt zelfs in de lame JS-versies zoals Rhino;)


12
2017-10-28 05:39



Je kunt Lodash gebruiken. De documentatie 

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

11
2017-11-04 16:51



De voor ... in-lus vertegenwoordigt elke eigenschap in een object omdat deze net een for-lus is. Je hebt propt in the for ... in loop gedefinieerd door te doen:

    for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}

A voor ... in lus doorzoekt de opsombare eigenschappen van een object. Welke variabele u ook definieert, of in de ... in de lus invoegt, verandert telkens wanneer deze naar de volgende eigenschap gaat die hij herhaalt. De variabele in de voor ... in lus itereert door de toetsen, maar de waarde ervan is de sleutelwaarde. Bijvoorbeeld:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

U kunt zien hoe de variabele verschilt van de waarde van de variabele. In tegenstelling hiermee doet een voor ... van loop het tegenovergestelde.

Ik hoop dat dit helpt.


10
2018-01-24 03:57