Pregunta ¿Cómo recorro o enumero un objeto JavaScript?


Tengo un objeto de JavaScript como el siguiente:

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

Ahora quiero recorrer todo p elementos (p1,p2,p3...) y obtener sus claves y valores. ¿Cómo puedo hacer eso?

Puedo modificar el objeto de JavaScript si es necesario. Mi objetivo final es recorrer algunos pares de valores clave y, si es posible, quiero evitar el uso eval.


2129
2018-03-26 06:01


origen


Respuestas:


Puedes usar el for-in loop como lo muestran otros. Sin embargo, también debe asegurarse de que la clave que obtiene sea propiedad real de un objeto y no provenga del prototipo.

Aquí está el fragmento:

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



En ECMAScript 5, puede combinar Object.keys() y Array.prototype.forEach():

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

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

ES6 agrega for...of:

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

ES2017 agrega Object.entries() que evita tener que buscar cada valor en el objeto original:

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

Ambos Object.keys() y Object.entries() iterar propiedades en el mismo orden que for...in lazo pero ignora la cadena de prototipos. Solo se iteran las propiedades enumerables del objeto.

Editar: ES2016 → ES6


621
2018-04-20 21:59



Tienes que usar el bucle for-in

Pero tenga mucho cuidado al usar este tipo de ciclo porque esto bucle todas las propiedades a lo largo de la cadena de prototipos.

Por lo tanto, al usar bucles for-in, siempre use el hasOwnProperty método para determinar si la propiedad actual en la iteración es realmente una propiedad del objeto que está revisando:

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 pregunta no estará completa si no mencionamos métodos alternativos para pasar por los objetos.

Hoy en día, muchas bibliotecas JavaScript conocidas proporcionan sus propios métodos para iterar sobre colecciones, es decir, sobre matrices, objetosy objetos tipo array. Estos métodos son fáciles de usar y son totalmente compatibles con cualquier navegador.

  1. Si trabajas con jQuery, puedes utilizar jQuery.each() método. Se puede usar para iterar sin problemas sobre objetos y matrices:

    $.each(obj, function(key, value) {
        console.log(key, value);
    });
    
  2. En Underscore.js puedes encontrar el método _.each(), que itera sobre una lista de elementos, cediendo cada uno a su vez a una función suministrada (preste atención al orden de los argumentos en iteratee ¡función!):

    _.each(obj, function(value, key) {
        console.log(key, value);
    });
    
  3. Lo-Dash proporciona varios métodos para iterar sobre las propiedades del objeto. BASIC _.forEach() (o es un alias _.each()) es útil para recorrer tanto objetos como matrices, sin embargo (!) objetos con length propiedad se tratan como matrices, y para evitar este comportamiento se sugiere utilizar _.forIn() y _.forOwn() métodos (estos también tienen value argumento que viene primero):

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

    _.forIn() itera sobre propio y heredado propiedades enumerables de un objeto, mientras _.forOwn() itera solo sobre propio propiedades de un objeto (básicamente contrastando hasOwnProperty función). Para objetos simples y literales de objetos cualquiera de estos métodos funcionará bien.

En general, todos los métodos descritos tienen el mismo comportamiento con cualquier objeto suministrado. Además de usar nativo for..in Loop será generalmente Más rápido que cualquier abstracción, como jQuery.each(), estos métodos son considerablemente más fáciles de usar, requieren menos codificación y proporcionan un mejor manejo de errores.


230
2018-01-20 17:58



En ECMAScript 5 tiene un nuevo enfoque en los campos de iteración de literal - Object.keys

Más información que puedes ver en MDN

Mi elección es más abajo como una solución más rápida en las versiones actuales de los navegadores (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;
}

Puede comparar el rendimiento de este enfoque con diferentes implementaciones en jsperf.com:

Soporte de navegador que puedes ver en Tabla de compatibilidad de Kangax

Para el viejo navegador que tienes sencillo y completo polyfill

UPD:

comparación de rendimiento para todos los casos más populares en esta pregunta en perfjs.info:

iteración literal del objeto


47
2017-11-16 19:59



Usted puede simplemente iterar sobre esto como:

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

Tenga en cuenta que key no asumirá el valor de la propiedad, es solo un valor de índice.


30
2018-03-26 06:05



Como es2015 es cada vez más popular, publico esta respuesta, que incluye el uso del generador y el iterador para iterar sin problemas a través de [key, value] pares. Como es posible en otros idiomas, por ejemplo, Ruby.

Ok aquí hay un código:

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

Toda la información sobre cómo se puede hacer un iterador y un generador que puede encontrar en la página del desarrollador Mozilla.

Espero que haya ayudado a alguien.

EDITAR:

ES2017 incluirá Object.entries que hará iterar sobre [key, value] pares en objetos aún más fácil. Ahora se sabe que será parte de un estándar de acuerdo con el ts39 información de la etapa.

Creo que es hora de actualizar mi respuesta para que sea aún más fresca de lo que es ahora.

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

Puede encontrar más información sobre el uso en MDN página


24
2017-08-27 09:06



vía prototipo con para cada() que debería saltear el cadena de prototipos propiedades:

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