Se houver um objeto Javascript:
var objects={...};
Suponha que ele tenha mais de 50 propriedades, sem saber os nomes das propriedades (sem saber as 'chaves') como obter cada valor de propriedade em um loop?
javascript
javascript-objects
Mellon
fonte
fonte
Respostas:
Usando um
for..in
loop simples :fonte
enumerable
sinalizador definido como falso. Isso - entre outras coisas - significa que você não repetirá nenhum método de classe, mas que repetirá métodos criados de outras maneiras.Dependendo de quais navegadores você precisa oferecer suporte, isso pode ser feito de várias maneiras. A esmagadora maioria dos navegadores em estado selvagem oferece suporte ao ECMAScript 5 (ES5), mas esteja avisado de que muitos dos exemplos abaixo usam
Object.keys
, o que não está disponível no IE <9. Consulte a tabela de compatibilidade .ECMAScript 3+
Se você precisar oferecer suporte a versões mais antigas do IE, esta é a opção para você:
O aninhado
if
garante que você não enumere as propriedades na cadeia de protótipos do objeto (que é o comportamento que você quase certamente deseja). Você deve usarao invés de
porque o ECMAScript 5+ permite criar objetos sem protótipo
Object.create(null)
e esses objetos não terão ohasOwnProperty
método O código malicioso também pode produzir objetos que substituem ohasOwnProperty
método.ECMAScript 5+
Você pode usar esses métodos em qualquer navegador que suporte o ECMAScript 5 e superior. Eles obtêm valores de um objeto e evitam enumerar a cadeia de protótipos. Onde
obj
está o seu objeto:Se você quer algo um pouco mais compacto ou deseja ter cuidado com funções em loops, então
Array.prototype.forEach
é seu amigo:O próximo método cria uma matriz que contém os valores de um objeto. Isso é conveniente para fazer o loop.
Se você deseja tornar os usuários
Object.keys
seguros contranull
(comofor-in
estão), pode fazê-loObject.keys(obj || {})...
.Object.keys
retorna propriedades enumeráveis . Para iterar sobre objetos simples, isso geralmente é suficiente. Se você tiver algo com propriedades não enumeráveis com as quais precisa trabalhar, poderá usarObject.getOwnPropertyNames
no lugar deObject.keys
.ECMAScript 2015+ (AKA ES6)
As matrizes são mais fáceis de iterar com o ECMAScript 2015. Você pode usar isso para sua vantagem ao trabalhar com valores um por um em um loop:
Usando as funções de seta de gordura do ECMAScript 2015, o mapeamento do objeto para uma matriz de valores se torna uma linha:
O ECMAScript 2015 apresenta
Symbol
, instâncias das quais podem ser usadas como nomes de propriedades. Para obter os símbolos de um objeto para enumerar, useObject.getOwnPropertySymbols
(essa função é a razão pela qualSymbol
não pode ser usada para criar propriedades particulares). A novaReflect
API do ECMAScript 2015 forneceReflect.ownKeys
, que retorna uma lista de nomes de propriedades (incluindo nomes não enumeráveis) e símbolos.Compreensões de matriz (não tente usar)
As compreensões da matriz foram removidas do ECMAScript 6 antes da publicação. Antes da remoção, uma solução seria semelhante a:
ECMAScript 2017+
O ECMAScript 2016 adiciona recursos que não afetam esse assunto. A especificação ECMAScript 2017 adiciona
Object.values
eObject.entries
. Ambas as matrizes de retorno (o que será surpreendente para alguns, dada a analogia comArray.entries
).Object.values
pode ser usado como está ou com umfor-of
loop.Se você deseja usar tanto a chave quanto o valor, então
Object.entries
é para você. Produz uma matriz cheia de[key, value]
pares. Você pode usar isso como está, ou (observe também a atribuição de desestruturação do ECMAScript 2015) em umfor-of
loop:Object.values
calçoFinalmente, como observado nos comentários e por teh_senaus em outra resposta, pode valer a pena usar um deles como calço. Não se preocupe, o seguinte não altera o protótipo, apenas adiciona um método a
Object
(que é muito menos perigoso). Usando funções de seta gorda, isso também pode ser feito em uma linha:que agora você pode usar como
Se você deseja evitar o desgaste quando um nativo
Object.values
existe, você pode:Finalmente...
Esteja ciente dos navegadores / versões que você precisa oferecer suporte. Os itens acima estão corretos onde os métodos ou recursos de linguagem são implementados. Por exemplo, o suporte ao ECMAScript 2015 foi desativado por padrão na V8 até recentemente, que alimentava navegadores como o Chrome. Os recursos do ECMAScript 2015 devem ser evitados até que os navegadores que você pretende oferecer suporte implementem os recursos necessários. Se você usar o babel para compilar seu código no ECMAScript 5, terá acesso a todos os recursos nesta resposta.
fonte
obj
duas vezes. Eu acho que criar uma função auxiliar é inevitável? Algo como valores (obj).Object.values = obj => Object.keys(obj).map(key => obj[key]);
Aqui está uma função reutilizável para obter os valores em uma matriz. Também leva em consideração os protótipos.
fonte
Object
não é um grande problema (Object.keys
é um calço comum), você provavelmente está pensando em modificar o protótipo de Objeto.hasOwnProperty()
? Como a chave seria iterada no loop desse objeto que não possui a propriedade?Se você tiver acesso ao Underscore.js, poderá usar a
_.values
função assim:fonte
Se você realmente quer uma matriz de valores, acho isso mais limpo do que construir uma matriz com um loop for ... in.
ECMA 5.1+
Vale a pena notar que, na maioria dos casos, você realmente não precisa de uma matriz de valores, será mais rápido fazer isso:
Isso itera sobre as chaves do Objeto o. Em cada iteração, k é definido como uma chave de o.
fonte
ES5
Object.keys
fonte
Você pode percorrer as teclas:
irá produzir:
fonte
Para as pessoas que se adaptaram cedo na era CofeeScript, aqui está outro equivalente.
O que pode ser melhor do que isso, pois
objects
pode ser reduzido para ser digitado novamente e diminuiu a legibilidade.fonte
use um polyfill como:
então use
3) lucro!
fonte
A partir de ECMA2017:
Object.values(obj)
irá buscar todos os valores de propriedade como uma matriz.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values
fonte
Aparentemente - como eu aprendi recentemente - esta é a maneira mais rápida de fazer isso:
fonte
A pergunta não especifica se também deseja propriedades herdadas e não enumeráveis.
Há uma pergunta para obter tudo, propriedades herdadas e propriedades não enumeráveis também , que o Google não consegue encontrar facilmente.
Minha solução para isso é:
E então itere sobre eles, basta usar um loop for-of:
Mostrar snippet de código
fonte
Use
Object.values()
:, passamos um objeto como argumento e recebemos uma matriz dos valores como valor de retorno.Isso retorna uma matriz de valores de propriedades enumeráveis próprias de um determinado objeto. Você obterá os mesmos valores usando o
for in
loop, mas sem as propriedades no Prototype. Este exemplo provavelmente tornará as coisas mais claras:fonte
fonte
Aqui está uma função semelhante ao array_values () do PHP
Veja como obter os valores do objeto se você estiver usando o ES6 ou superior:
fonte
Compatível com o ES7, mesmo alguns navegadores ainda não o suportam
Desde então,
Object.values(<object>)
será incorporado no ES7 eAté esperar todos os navegadores para suportá-lo, você pode envolvê-lo em uma função
Então :
Depois que os navegadores se tornarem compatíveis com o ES7, você não precisará alterar nada no seu código.
fonte
Percebo que estou um pouco atrasado, mas aqui está um calço para o novo
Object.values
método do firefox 47fonte
Object.entries faz isso da melhor maneira.
fonte
const myObj = { a:1, b:2, c:3 }
Obtenha todos os valores:
o caminho mais curto:
const myValues = Object.values(myObj)
const myValues = Object.keys(myObj).map(key => myObj[key])
fonte
fonte
no uso do ECMAScript5
Caso contrário, se o seu navegador não o suportar, use o conhecido
for..in loop
fonte
object[key]
para obter os valores em um loop.for..in
(e hasOwnProperty) para que realmente não ganhe nada. Desejo que o ECMAScript 5th seja definidoObject.pairs
(eObject.items
para[[key, value], ..]
), mas, infelizmente, isso não acontece.Agora eu uso o Dojo Toolkit porque navegadores mais antigos não suportam
Object.values
.Resultado :
fonte
usar
e se você estiver usando o Google Chrome, abra o Console usando Ctrl + Shift + j
Saltar >> Console
fonte