Como iterar sobre um objeto JavaScript?
Como posso iterar sobre um objeto JavaScript usando diferentes métodos?
Iterar sobre objetos é uma tarefa fundamental na programação JavaScript. Diferentemente de arrays, objetos em JavaScript não são iteráveis por padrão, o que significa que você não pode usar métodos como forEach(), map() ou for...of loop diretamente em um objeto. No entanto, há várias maneiras de fazer um loop pelas propriedades de um objeto e acessar as chaves e os valores. Neste artigo, exploraremos diferentes métodos para iterar sobre um objeto JavaScript de forma eficiente, juntamente com sua sintaxe, exemplos e casos de uso.
Key Takeaways: Objetos JavaScript não são inerentemente iteráveis, mas existem vários métodos para fazer um loop por suas propriedades. O loop for...in é tradicional, mas requer uma verificação hasOwnProperty(), enquanto métodos mais novos como Object.entries() com map()/forEach(), Object.keys() com forEach() e Object.values() oferecem abordagens mais simplificadas. O método _.forOwn() do Lodash fornece uma sintaxe conveniente para aqueles que já usam a biblioteca. A escolha do método de iteração depende dos requisitos de compatibilidade do navegador, da legibilidade do código e de casos de uso específicos. Embora o desempenho possa variar ligeiramente entre os métodos, as diferenças geralmente são insignificantes para a maioria dos aplicativos, e os desenvolvedores devem priorizar a clareza e a manutenibilidade do código
Escreva o código mesmo se você for iniciante com o Assistente de IA do Latenode
Método 1: Usando o loop for...in
O loop for...in é uma maneira tradicional de iterar sobre as propriedades de um objeto. Ele permite que você acesse tanto as chaves quanto os valores de um objeto. Veja como funciona:
Sintaxe:
<span class="hljs-keyword">for</span> (let key <span class="hljs-keyword">in</span> <span class="hljs-keyword">object</span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">object</span>.hasOwnProperty(key)) {
// <span class="hljs-keyword">Perform</span> operations <span class="hljs-keyword">with</span> key <span class="hljs-keyword">and</span> <span class="hljs-keyword">object</span>[key]
}
}
Exemplo:
const person = {
<span class="hljs-built_in"> name</span>: <span class="hljs-string">'John'</span>,
age: <span class="hljs-number">30</span>,
city: <span class="hljs-string">'New York'</span>
};
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span><span class="hljs-built_in"> key</span> <span class="hljs-keyword">in</span> person) {
<span class="hljs-keyword">if</span> (person.hasOwnProperty<span class="hljs-built_in">(key</span>)) {
console.log<span class="hljs-built_in">(key</span> + <span class="hljs-string">': '</span> + person<span class="hljs-built_in">[key</span>]);
}
}
Output:<span class="hljs-built_in">
name</span>: John
age: <span class="hljs-number">30</span>
city: New York
É importante usar o método hasOwnProperty() dentro do loop para verificar se a chave pertence ao objeto em si e não à sua cadeia de protótipos. Isso garante que você itere somente sobre as próprias propriedades do objeto e evite quaisquer propriedades herdadas.
O loop for...in javascript através do objeto é uma maneira direta de iterar sobre as propriedades de um objeto. No entanto, ele tem algumas limitações:
- Ele itera sobre todas as propriedades enumeráveis de um objeto, incluindo as herdadas da cadeia de protótipos. É por isso que é necessário usar hasOwnProperty() para filtrar propriedades herdadas.
- A ordem da iteração não é garantida. As propriedades podem não ser acessadas na mesma ordem em que foram definidas.
Apesar dessas limitações, o loop for...in continua sendo um método comumente usado para iteração de objetos devido à sua simplicidade e amplo suporte ao navegador.
Método 2: Usando o método Object.entries() e o método map()
O método Object.entries() é uma adição mais recente ao JavaScript (introduzido no ECMAScript 2017) que retorna um array de pares de propriedade [chave, valor] enumeráveis de string-chave de um objeto. Podemos então usar o método map() para iterar sobre o array e acessar as chaves e valores.
Sintaxe:
const person = {
<span class="hljs-built_in"> name</span>: <span class="hljs-string">'John'</span>,
age: <span class="hljs-number">30</span>,
city: <span class="hljs-string">'New York'</span>
};
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span><span class="hljs-built_in"> key</span> <span class="hljs-keyword">in</span> person) {
<span class="hljs-keyword">if</span> (person.hasOwnProperty<span class="hljs-built_in">(key</span>)) {
console.log<span class="hljs-built_in">(key</span> + <span class="hljs-string">': '</span> + person<span class="hljs-built_in">[key</span>]);
}
}
Output:<span class="hljs-built_in">
name</span>: John
age: <span class="hljs-number">30</span>
city: New York
Exemplo:
const person = {
<span class="hljs-built_in"> name</span>: <span class="hljs-string">'John'</span>,
age: <span class="hljs-number">30</span>,
city: <span class="hljs-string">'New York'</span>
};
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span><span class="hljs-built_in"> key</span> <span class="hljs-keyword">in</span> person) {
<span class="hljs-keyword">if</span> (person.hasOwnProperty<span class="hljs-built_in">(key</span>)) {
console.log<span class="hljs-built_in">(key</span> + <span class="hljs-string">': '</span> + person<span class="hljs-built_in">[key</span>]);
}
}
Output:<span class="hljs-built_in">
name</span>: John
age: <span class="hljs-number">30</span>
city: New York
O método Object.entries() fornece uma maneira conveniente de obter um array de pares chave-valor de um objeto. Ao combiná-lo com o método map(), você pode facilmente iterar sobre o array e executar operações em cada par chave-valor.
Uma vantagem de usar Object.entries() é que ele retorna apenas as propriedades enumeráveis do próprio objeto, excluindo quaisquer propriedades herdadas da cadeia de protótipos. Isso elimina a necessidade de uma verificação adicional hasOwnProperty().
No entanto, tenha em mente que Object.entries() não é suportado em navegadores mais antigos (como o Internet Explorer). Se a compatibilidade do navegador for uma preocupação, você pode precisar usar um polyfill ou um método alternativo.
Para mais informações sobre Object.entries(), você pode consultar o Documentação MDN.
Método 3: Usando o método forEach() e o método Object.keys()
O método Object.keys() retorna um array de nomes de propriedades enumeráveis (chaves) de um dado objeto. Podemos usar o método forEach() para iterar sobre o array de chaves e acessar os valores correspondentes usando as chaves.
Sintaxe:
<span class="hljs-keyword">Object</span>.keys(<span class="hljs-keyword">object</span>).<span class="hljs-keyword">forEach</span>(key => {
// <span class="hljs-keyword">Perform</span> operations <span class="hljs-keyword">with</span> key <span class="hljs-keyword">and</span> <span class="hljs-keyword">object</span>[key]
});
Exemplo:
const person = {
<span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>,
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span>
};
Object.keys(person).forEach(<span class="hljs-function"><span class="hljs-params">key</span> =></span> {
<span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(key + <span class="hljs-string">': '</span> + person[key]);
});
Output:
name: John
age: <span class="hljs-number">30</span>
city: <span class="hljs-keyword">New</span> York
Usar Object.keys() em combinação com forEach() fornece uma maneira de iterar sobre as chaves de um objeto e acessar os valores correspondentes. Este método é útil quando você precisa apenas das chaves de um objeto e quer executar operações com base nessas chaves.
Semelhante a Object.entries(), Object.keys() retorna apenas as propriedades enumeráveis do próprio objeto, então você não precisa usar hasOwnProperty() para filtrar propriedades herdadas.
Para mais informações sobre Object.keys(), você pode consultar o Documentação MDN.
Método 4: Usando o método Lodash _.forOwn()
Lodash é uma biblioteca de utilitários popular que fornece um conjunto de funções úteis para trabalhar com objetos e arrays. Se você já estiver usando Lodash em seu projeto, você pode aproveitar seu método _.forOwn() para iterar sobre as próprias propriedades de um objeto.
Sintaxe:
_.forOwn(<span class="hljs-keyword">object</span>, (<span class="hljs-keyword">value</span>, key) => {
// <span class="hljs-keyword">Perform</span> operations <span class="hljs-keyword">with</span> key <span class="hljs-keyword">and</span> <span class="hljs-keyword">value</span>
});
Exemplo:
<span class="hljs-keyword">const</span> _ = <span class="hljs-built_in">require</span>(<span class="hljs-string">'lodash'</span>);
<span class="hljs-keyword">const</span> person = {
<span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>,
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span>
};
_.<span class="hljs-title function_">forOwn</span>(person, <span class="hljs-function">(<span class="hljs-params">value, key</span>) =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(key + <span class="hljs-string">': '</span> + value);
});
<span class="hljs-title class_">Output</span>:
<span class="hljs-attr">name</span>: <span class="hljs-title class_">John</span>
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>
<span class="hljs-attr">city</span>: <span class="hljs-title class_">New</span> <span class="hljs-title class_">York</span>
O método _.forOwn() itera sobre as próprias propriedades enumeráveis de um objeto e fornece o valor e a chave para a função de retorno de chamada. É uma alternativa conveniente ao loop for...in por meio do object.entries javascript quando você já está usando Lodash em seu projeto.
Note que usar Lodash requer instalar a biblioteca e importá-la para seu projeto. Se você não estiver usando Lodash para outros propósitos, pode não ser necessário incluí-lo somente para iteração de objetos.
Para obter mais informações sobre Lodash e seu loop js por meio de métodos de iteração de objetos, você pode consultar o Documentação do Lodash.
Método 5: Usando o método Object.values() e o método forEach()
O método Object.values() retorna um array de valores de propriedade enumeráveis próprios de um objeto. Podemos usar o método forEach() para iterar pelo objeto javascript sobre o array de valores. Se você também precisar das chaves correspondentes, pode usar o método Object.keys() em conjunto.
Sintaxe:
<span class="hljs-keyword">Object</span>.<span class="hljs-keyword">values</span>(<span class="hljs-keyword">object</span>).<span class="hljs-keyword">forEach</span>((<span class="hljs-keyword">value</span>, <span class="hljs-keyword">index</span>) => {
const key = <span class="hljs-keyword">Object</span>.keys(<span class="hljs-keyword">object</span>)[<span class="hljs-keyword">index</span>];
// <span class="hljs-keyword">Perform</span> operations <span class="hljs-keyword">with</span> key <span class="hljs-keyword">and</span> <span class="hljs-keyword">value</span>
});
Exemplo:
<span class="hljs-keyword">const</span> person = {
<span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>,
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>,
<span class="hljs-attr">city</span>: <span class="hljs-string">'New York'</span>
};
<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">values</span>(person).<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">value, index</span>) =></span> {
<span class="hljs-keyword">const</span> key = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(person)[index];
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(key + <span class="hljs-string">': '</span> + value);
});
<span class="hljs-title class_">Output</span>:
<span class="hljs-attr">name</span>: <span class="hljs-title class_">John</span>
<span class="hljs-attr">age</span>: <span class="hljs-number">30</span>
<span class="hljs-attr">city</span>: <span class="hljs-title class_">New</span> <span class="hljs-title class_">York</span>
Usar Object.values() permite que você itere sobre os valores de um objeto diretamente. Se você também precisar das chaves correspondentes, você pode obtê-las usando Object.keys() e acessando a chave no mesmo índice que o valor.
Este método é útil quando você precisa trabalhar principalmente com os valores de um objeto e, opcionalmente, acessar as chaves quando necessário.
Para mais informações sobre Object.values(), você pode consultar o Documentação MDN.
Resumindo
Neste artigo, exploramos vários métodos para iterar sobre um objeto iterate JavaScript. Cada método tem suas próprias vantagens e casos de uso:
- O loop for...in é uma maneira tradicional de iterar sobre objetos javascript. É simples e amplamente suportado, mas requer uma verificação adicional hasOwnProperty() para evitar iterar sobre propriedades herdadas.
- O método Object.entries(), combinado com map() ou forEach(), fornece uma maneira concisa de acessar chaves e valores de um objeto. Ele elimina a necessidade de hasOwnProperty(), mas pode não ser suportado em navegadores mais antigos.
- O método Object.keys(), junto com forEach(), permite iterar sobre as chaves de um objeto e acessar os valores correspondentes. É útil quando você precisa trabalhar principalmente com as chaves.
- O método Lodash _.forOwn() é uma opção conveniente se você já estiver usando Lodash em seu projeto. Ele fornece uma sintaxe limpa para iterar sobre as próprias propriedades de um objeto.
- O método Object.values(), juntamente com forEach(), foca em iterar sobre os valores de um foreach-object. Você pode usar Object.keys() em conjunto se também precisar das chaves.
Ao escolher um método para iterar sobre um objeto JavaScript, considere fatores como compatibilidade do navegador, legibilidade do código e requisitos específicos do seu caso de uso. Seja qual for o método escolhido, entender como iterar efetivamente sobre objetos é crucial para uma programação JavaScript eficiente.
Escreva o código mesmo se você for iniciante com o Assistente de IA do Latenode
Perguntas frequentes
Qual é a diferença entre for...in e Object.entries()?
O loop for...in itera sobre todas as propriedades enumeráveis de um objeto, incluindo as herdadas da cadeia de protótipos. Ele requer uma verificação adicional com hasOwnProperty() para evitar iterar sobre propriedades herdadas. Por outro lado, Object.entries() retorna uma matriz de pares de propriedade [chave, valor] com chave de string enumerável de um dado objeto, que podem ser facilmente iterados usando métodos como map() ou forEach(). Object.entries() inclui apenas as propriedades próprias do objeto, excluindo as herdadas.
Qual método devo usar se eu precisar apenas de chaves ou apenas de valores?
Se você só precisa das chaves de um objeto js iterate, você pode usar o método Object.keys(), que retorna uma matriz de nomes de propriedades enumeráveis (chaves) de um dado objeto. Se você só precisa dos valores, você pode usar o método Object.values(), que retorna uma matriz de valores de propriedades enumeráveis de um dado objeto.
Qual método é mais rápido ou eficiente?
O desempenho de diferentes métodos pode variar dependendo do mecanismo JavaScript e do tamanho do objeto. Geralmente, o loop for...in é considerado um pouco mais rápido do que usar métodos como Object.entries() ou Object.keys() com forEach(). No entanto, a diferença de desempenho é frequentemente insignificante, a menos que você esteja lidando com objetos extremamente grandes. É recomendado priorizar a legibilidade e a manutenibilidade do código, a menos que você tenha requisitos de desempenho específicos.
Como posso iterar sobre as entradas de um objeto preservando a ordem das chaves?
Objetos em JavaScript são desordenados por padrão, e a ordem das chaves não é garantida. Se você precisa iterar sobre as propriedades de um objeto em uma ordem específica, você tem algumas opções:
- Use o método Object.entries() para obter uma matriz de pares [chave, valor], classificar a matriz com base nas chaves e, em seguida, iterar sobre a matriz classificada.
- Crie uma matriz de chaves na ordem desejada e acesse os valores correspondentes do objeto usando essas chaves.
- Use um Map em vez de um objeto, pois o Map mantém a ordem de inserção dos pares chave-valor. Você pode converter um objeto em um Map usando new Map(Object.entries(object)).
Posso usar funções de seta com esses métodos de iteração?
Sim, você pode usar funções de seta com métodos como map(), forEach() e _.forOwn(). As funções de seta fornecem uma sintaxe concisa para escrever expressões de função. Por exemplo:
Object.entries(person).<span class="hljs-built_in">map</span>(<span class="hljs-function">(<span class="hljs-params">[key, value]</span>) =></span> {
<span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(key + <span class="hljs-string">': '</span> + value);
});
No entanto, tenha em mente que as funções de seta têm uma ligação lexical this, o que significa que elas herdam o valor this do escopo circundante. Se você precisar acessar o contexto this dentro do retorno de chamada de iteração, pode ser necessário usar uma expressão de função regular.
Existem outras bibliotecas ou métodos para iteração de objetos?
Sim, há várias outras bibliotecas e métodos que fornecem utilitários para iteração de objetos. Alguns populares incluem:
- Underscore.js: Fornece o método _.each() para iterar sobre objetos.
- Lodash: Oferece vários métodos como _.forOwn(), _.forIn() e _.forEach() para iteração de objetos.
- jQuery: Possui o método $.each() que pode ser usado para iterar sobre objetos.
Essas bibliotecas oferecem funcionalidade adicional e podem ser úteis se você já as estiver usando em seu projeto. No entanto, se você só precisa de iteração básica de objetos, os métodos nativos de JavaScript discutidos neste artigo são suficientes.
Lembre-se, a escolha do método de iteração depende de seus requisitos específicos, base de código e preferência pessoal. Experimente diferentes abordagens e escolha aquela que melhora a legibilidade, a manutenibilidade e a eficiência do código em seu caso de uso específico.
