Como percorrer objetos em JavaScript

Foto de Etienne Girardet em Unsplash

De vez em quando, você pode precisar fazer um loop através de objetos em JavaScript. A única maneira de fazer isso antes do ES6 era com um loop de for...in .

O problema com um loop for for...in é que ele itera através de propriedades na cadeia Prototype. Quando você percorre um objeto com o loop for...in , precisa verificar se a propriedade pertence ao objeto. Você pode fazer isso com hasOwnProperty .

 para (var property in object) { 
if (object.hasOwnProperty (propriedade)) {
// faça as coisas aqui
}
}

Nós não temos mais que confiar em for...in e hasOwnProperty agora. Há um jeito melhor.

Uma maneira melhor de percorrer objetos

A melhor maneira de percorrer os objetos é primeiro converter o objeto em uma matriz. Então, você percorre a matriz.

Você pode converter um objeto em uma matriz com três métodos:

  1. Object.keys
  2. Object.values
  3. Object.entries

Object.keys

Object.keys cria uma matriz que contém as propriedades de um objeto. Aqui está um exemplo.

 frutas const = { 
maçã: 28,
laranja: 17,
pêra: 54,
}
 chaves const = teclas Object.key (frutas) 
console.log (keys) // [maçã, laranja, pêra]

Object.values

Object.values cria uma matriz que contém os valores de cada propriedade em um objeto. Aqui está um exemplo:

 frutas const = { 
maçã: 28,
laranja: 17,
pêra: 54,
}
 valores constantes = Object.values ??(frutos) 
console.log (valores) // [28, 17, 54]

Object.entries

Object.entries cria uma matriz de matrizes. Cada matriz interna possui dois itens. O primeiro item é a propriedade; o segundo item é o valor.

Aqui está um exemplo:

 frutas const = { 
maçã: 28,
laranja: 17,
pêra: 54,
}
 entradas const = Object.entries (frutas) 
console.log (entradas)
// [
// [apple, 28],
// [laranja, 17]
// [pêra, 54]
//]

Meu favorito dos três é Object.entries , porque você obtém os valores de chave e propriedade.

Looping através do array

Depois de converter o objeto em uma matriz com Object.keys , Object.values ou Object.entries , você poderá Object.entries lo como se fosse uma matriz normal.

 // Looping através de arrays criados a partir de Object.keys 
chaves const = teclas Object.key (frutas)
para (chave de chaves const) {
console.log (chaves)
}
 // Resultados: 
// maçã
// laranja
// pera

Se você usar Object.entries , poderá desestruturar o array em sua chave e propriedade.

 para (const [fruta, contagem] de entradas) { 
console.log (`Existem $ {count} $ {fruit} s`)
}
 // resultado 
// Existem 28 maçãs
// Existem 17 laranjas
// Existem 54 peras

Empacotando

A melhor maneira de fazer um loop através de objetos é primeiro convertê-lo em um array com um desses três métodos.

  1. Object.keys
  2. Object.values
  3. Object.entries

Em seguida, você percorre os resultados como uma matriz normal.

Se esta lição tiver ajudado você, aproveite o Learn JavaScript , onde aprenderá a criar o que quiser do zero. A inscrição para o Learn JavaScript é aberta em julho de 2018 (muito em breve!).

Obrigado pela leitura. Este artigo ajudou você de alguma forma? Se o fiz, espero que considere compartilhá-lo ; Você pode simplesmente ajudar alguém que tenha se sentido da mesma maneira antes de ler o artigo. Obrigado.