Si hay un objeto Javascript:
var objects={...};
Supongamos que tiene más de 50 propiedades, sin conocer los nombres de las propiedades (es decir, sin conocer las 'claves'), ¿cómo obtener cada valor de propiedad en un bucle?
javascript
javascript-objects
Mellon
fuente
fuente
Respuestas:
Al usar un
for..in
bucle simple :fuente
enumerable
bandera establecida en falso. Esto, entre otras cosas, significa que no iterará sobre ningún método de clase, sino que iterará sobre métodos creados de otras maneras.Dependiendo de qué navegadores tenga que admitir, esto se puede hacer de varias maneras. La abrumadora mayoría de los navegadores en la naturaleza admite ECMAScript 5 (ES5), pero tenga en cuenta que muchos de los ejemplos a continuación utilizan
Object.keys
, que no está disponible en IE <9. Consulte la tabla de compatibilidad .ECMAScript 3+
Si tiene que admitir versiones anteriores de IE, esta es la opción para usted:
El anidado
if
se asegura de que no enumere las propiedades en la cadena de prototipos del objeto (que es el comportamiento que seguramente desea). Debes usarmás bien que
porque ECMAScript 5+ te permite crear objetos sin prototipos con
Object.create(null)
, y estos objetos no tendrán elhasOwnProperty
método. El código travieso también puede producir objetos que anulan elhasOwnProperty
método.ECMAScript 5+
Puede utilizar estos métodos en cualquier navegador que admita ECMAScript 5 y superior. Estos obtienen valores de un objeto y evitan enumerarlos en la cadena del prototipo. ¿Dónde
obj
está tu objeto?Si quieres algo un poco más compacto o quieres tener cuidado con las funciones en bucles, entonces
Array.prototype.forEach
es tu amigo:El siguiente método crea una matriz que contiene los valores de un objeto. Esto es conveniente para recorrer.
Si desea hacer que los que usan estén
Object.keys
seguros contranull
(comofor-in
está), puede hacerloObject.keys(obj || {})...
.Object.keys
devuelve propiedades enumerables . Para iterar sobre objetos simples, esto suele ser suficiente. Si tiene algo con propiedades no enumerables con las que necesita trabajar, puede usarloObject.getOwnPropertyNames
en lugar deObject.keys
.ECMAScript 2015+ (AKA ES6)
Las matrices son más fáciles de iterar con ECMAScript 2015. Puede usar esto para su ventaja cuando trabaje con valores uno por uno en un bucle:
Usando las funciones de flecha gruesa ECMAScript 2015, mapear el objeto a una matriz de valores se convierte en una línea:
Presenta ECMAScript 2015
Symbol
, cuyas instancias pueden usarse como nombres de propiedad. Para obtener los símbolos de un objeto para enumerarlos, useObject.getOwnPropertySymbols
(esta función es la razón por la cualSymbol
no se puede usar para hacer propiedades privadas). La nuevaReflect
API de ECMAScript 2015 proporcionaReflect.ownKeys
, que devuelve una lista de nombres de propiedades (incluidos los no enumerables) y símbolos.Comprensiones de matriz (no intente usar)
Se eliminaron las comprensiones de matriz de ECMAScript 6 antes de la publicación. Antes de su eliminación, una solución habría parecido:
ECMAScript 2017+
ECMAScript 2016 agrega características que no afectan este tema. La especificación ECMAScript 2017 agrega
Object.values
yObject.entries
. Ambas matrices de retorno (lo que será sorprendente para algunos dada la analogía conArray.entries
).Object.values
se puede usar tal cual o con unfor-of
bucle.Si desea utilizar tanto la clave como el valor, entonces
Object.entries
es para usted. Produce una matriz llena de[key, value]
pares. Puede usar esto como está o (observe también la asignación de desestructuración de ECMAScript 2015) en unfor-of
bucle:Object.values
calceFinalmente, como se señaló en los comentarios y por teh_senaus en otra respuesta, puede valer la pena usar uno de estos como un calce. No se preocupe, lo siguiente no cambia el prototipo, solo agrega un método
Object
(que es mucho menos peligroso). Usando las funciones de flecha gruesa, esto también se puede hacer en una línea:que ahora puedes usar como
Si desea evitar el calce cuando
Object.values
existe un nativo , puede hacer lo siguiente:Finalmente...
Tenga en cuenta los navegadores / versiones que necesita admitir. Lo anterior es correcto donde se implementan los métodos o las características del lenguaje. Por ejemplo, el soporte para ECMAScript 2015 se desactivó de forma predeterminada en V8 hasta hace poco, lo que alimentó navegadores como Chrome. Las características de ECMAScript 2015 deben evitarse hasta que los navegadores que intente admitir implementen las características que necesita. Si usa babel para compilar su código en ECMAScript 5, entonces tiene acceso a todas las funciones de esta respuesta.
fuente
obj
dos veces. ¿Supongo que crear una función auxiliar es inevitable? Algo parecido a los valores (obj).Object.values = obj => Object.keys(obj).map(key => obj[key]);
Aquí hay una función reutilizable para obtener los valores en una matriz. También tiene en cuenta los prototipos.
fuente
Object
no es un gran problema (Object.keys
es una cuña común), probablemente esté pensando en modificar el prototipo de Objeto.hasOwnProperty()
? ¿Cómo se iteraría la clave dentro del bucle de ese objeto que no tiene la propiedad?Si tiene acceso a Underscore.js, puede usar la
_.values
función de esta manera:fuente
Si realmente desea una matriz de valores, encuentro esto más limpio que construir una matriz con un bucle for ... in.
ECMA 5.1+
Vale la pena señalar que en la mayoría de los casos realmente no necesita una matriz de valores, será más rápido hacer esto:
Esto itera sobre las claves del objeto o. En cada iteración, k se establece en una clave de o.
fuente
ES5
Object.keys
fuente
Puede recorrer las teclas:
dará salida:
fuente
Para aquellos que se adaptaron temprano en la era de CofeeScript, aquí hay otro equivalente para ello.
Lo que puede ser mejor que esto porque
objects
se puede reducir para volver a escribir y disminuir la legibilidad.fuente
use un polyfill como:
luego usa
3) beneficio!
fuente
ECMA2017 en adelante:
Object.values(obj)
obtendrá todos los valores de propiedad como una matriz.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
fuente
Aparentemente, como aprendí recientemente, esta es la forma más rápida de hacerlo:
fuente
La pregunta no especifica si también se desean propiedades heredadas y no enumerables.
Hay una pregunta para obtener todo, propiedades heredadas y propiedades no enumerables también , que Google no puede encontrar fácilmente.
Mi solución para eso es:
Y luego iterar sobre ellos, solo use un bucle for-of:
Mostrar fragmento de código
fuente
Utilizar:
Object.values()
pasamos un objeto como argumento y recibimos una matriz de valores como valor de retorno.Esto devuelve una matriz de valores de propiedad enumerables propios de un objeto dado. Obtendrá los mismos valores que al usar el
for in
bucle pero sin las propiedades del prototipo. Este ejemplo probablemente aclarará las cosas:fuente
fuente
Aquí hay una función similar a los array_values () de PHP
Aquí le mostramos cómo obtener los valores del objeto si está utilizando ES6 o superior:
fuente
Compatible con ES7, incluso algunos navegadores aún no lo admiten.
Desde entonces,
Object.values(<object>)
estará integrado en ES7 yHasta que espere que todos los navegadores lo admitan, puede incluirlo dentro de una función:
Entonces :
Una vez que los navegadores sean compatibles con ES7, no tendrá que cambiar nada en su código.
fuente
Me doy cuenta de que llego un poco tarde, pero aquí hay una cuña para el nuevo
Object.values
método Firefox 47fuente
Object.entries lo hace de mejor manera.
fuente
const myObj = { a:1, b:2, c:3 }
Obtenga todos los valores:
El camino más corto:
const myValues = Object.values(myObj)
const myValues = Object.keys(myObj).map(key => myObj[key])
fuente
fuente
en uso ECMAScript5
De lo contrario, si su navegador no lo admite, use el conocido
for..in loop
fuente
object[key]
para obtener los valores en un bucle.for..in
(y hasOwnProperty) para que realmente no gane nada ... Desearía que ECMAScript 5th definieraObject.pairs
(yObject.items
para[[key, value], ..]
), pero, por desgracia, no lo hace.Ahora uso Dojo Toolkit porque los navegadores más antiguos no son compatibles
Object.values
.Salida:
fuente
utilizar
y si usas Google Chrome, abre la consola usando Ctrl + Shift + j
Ir a >> Consola
fuente