Como iterar através de chaves de objetos e valores em JavaScript

às vezes você pode precisar iterar através de um objeto em JavaScript para obter vários pares de valores de chave. Neste artigo, vamos olhar para quatro maneiras diferentes de looping sobre propriedades do objeto em JavaScript.

antes de ES6, a única maneira de circular através de um objecto era a for…in loop. O método Object.keys() foi introduzido no ES6 para facilitar a iteração de objetos. Mais tarde, na ES8, dois novos métodos foram adicionados, Object.entries() e Object.values(). Os métodos mais novos convertem o objeto em um array e então usam métodos de looping de array para iterar sobre esse array.vamos começar com o primeiro método!

for…in Loop

a maneira mais simples e direta de iterar sobre propriedades do objeto é usando a afirmação for...in. Este método funciona em todos os navegadores modernos e antigos, incluindo Internet Explorer 6 ou superior.

aqui está um exemplo que usa o for...in loop para iterar sobre um objecto:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

The problem with for...in loop is that it iterates through the properties in the prototype chain as well. Uma vez que os objetos em JavaScript podem herdar propriedades de seus protótipos, a declaração fo...in irá circular através dessas propriedades também.

para evitar a iteração sobre as propriedades do protótipo ao fazer looping de um objecto, é necessário verificar explicitamente se a propriedade pertence ao objecto usando o método hasOwnProperty() :

for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}

Felizmente, não precisamos mais depender de for...in e hasOwnProperty() método para efectuar um ciclo através de um objeto. Há melhores maneiras disponíveis.

Object.keys () método

o método Object.keys() foi introduzido no ES6. Ele pega o objeto que você deseja iterar como um argumento e retorna uma matriz contendo todos os nomes de Propriedades (ou chaves).

Você pode então usar qualquer um dos métodos de looping de array, como forEach (), para iterar através do array e recuperar o valor de cada propriedade.

aqui está um exemplo:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

na declaração da função acima, usei a sintaxe ES6. Presumo que já esteja familiarizado com o ES6, especialmente com as funções arrow. Se você é novo no ES6, dê uma olhada no Guia de funções arrow para aprender sobre ele.

Object.values () Method

the Object.values () method was introduced in ES8 and it does the opposite of Object.key(). Ele retorna os valores de todas as propriedades do objeto como um array. Você pode então fazer um loop através da matriz de valores usando qualquer um dos métodos de looping do array.

vamos olhar para um exemplo:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

Object.entries () Method

the Object.entradas () é outro método que foi introduzido no ES8 e pode ser usado para atravessar um objeto. Ao contrário de Object.values() que cria uma matriz de valores no objeto, Object.entries() produz uma matriz de matrizes. Cada matriz interna tem dois elementos. O primeiro elemento é a propriedade; o segundo elemento é o valor.

Aqui está um exemplo:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

to iterate over the array returned byObject.entries(), you can either use the for…of loop or the forEach () method as shown below:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

Conclusion

That’s all for iterating over object properties in JavaScript. Analisámos quatro métodos diferentes para realizar esta tarefa. for...in continua a ser uma boa opção se quiser suportar navegadores antigos. Caso contrário, basta usar qualquer um dos métodos mais recentes: Object.keys()Object.values() ou Object.entries().como este artigo? Siga @attacomsian no Twitter. Você também pode me seguir em LinkedIn e DEV. Subscrever a fonte RSS.

👋 Se você gosta de ler meus artigos e quer me apoiar para continuar a criar tutoriais gratuitos, ☕ me compre um café (custo $5) .