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:
-
Object.keys -
Object.values -
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.
-
Object.keys -
Object.values -
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.