Hvordan får jeg tilgang til egenskaper til et JavaScript-objekt hvis jeg ikke kjenner navnene?

Si at du har et JavaScript-objekt som dette:

var data = { foo: 'bar', baz: 'quux' };

Du kan få tilgang til egenskapene ved hjelp av egenskapsnavnet:

var foo = data.foo;
var baz = data["baz"];

Men er det mulig å få tak i disse verdiene hvis du ikke kjenner navnene på egenskapene? Gjør den uordnede naturen til disse egenskapene det umulig å skille dem fra hverandre?

I mitt tilfelle tenker jeg spesifikt på en situasjon der en funksjon må akseptere en serie med navne-verdi-par, men navnene på egenskapene kan endres.

Mine tanker om hvordan man kan gjøre dette så langt er å sende navnene på egenskapene til funksjonen sammen med dataene, men dette føles som en juks. Jeg vil foretrekke å gjøre dette med introspeksjon hvis mulig.

Svar #1

Du kan loope gjennom nøkler på denne måten:

for (var key in data) {
  console.log(key);
}

Dette logger "Navn" og "Verdi".

Hvis du har en mer kompleks objekttype (ikke bare et enkelt hash-lignende objekt, som i det opprinnelige spørsmålet), vil du bare løkke gjennom nøkler som tilhører objektet selv, i motsetning til nøkler på objektets prototype:

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    console.log(key);
  }
}

Som du bemerket, er det ingen garanti for at nøklene er i en bestemt rekkefølge. Legg merke til hvordan dette skiller seg fra følgende:

for each (var value in data) {
  console.log(value);
}

Dette eksemplet går gjennom verdier i en løkke, så det vil logge Property Name og 0. N.B.: for each-syntaksen støttes for det meste bare i Firefox, men ikke i andre nettlesere.

Hvis målnettleserne dine støtter ES5, eller nettstedet ditt inkluderer es5-shim.js (anbefalt), kan du også bruke Object.keys:

var data = { Name: 'Property Name', Value: '0' };
console.log(Object.keys(data)); // => ["Name", "Value"]

og løkke med Array.prototype.forEach:

Object.keys(data).forEach(function (key) {
  console.log(data[key]);
});
// => Logs "Property Name", 0

Svar #2

Gamle versjoner av JavaScript (< ES5) krever bruk av en for..in-løkke:

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    // do something with key
  }
}

ES5 introduserer Object.keys og Array#forEach som gjør dette litt enklere:

var data = { foo: 'bar', baz: 'quux' };

Object.keys(data); // ['foo', 'baz']
Object.keys(data).map(function(key){ return data[key] }) // ['bar', 'quux']
Object.keys(data).forEach(function (key) {
  // do something with data[key]
});

ES2017 introduserer Object.values og Object.entries.

Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]

Svar #3

for(var property in data) {
    alert(property);
}

Relaterte artikler