Como iterar sobre chaves de objeto com JavaScript

Objetos personalizados não podem ser iterados usando o for...of ciclo. Além disso, você não pode usar métodos iteradores como map() e forEach(). Se o fizer, você receberá um TypeError em cada instância.

Em vez disso, use for...in para iterar sobre objetos. Esse método itera sobre todas as propriedades não-Symbol enumeráveis ​​do objeto.

No exemplo a seguir, usamos para iterar sobre todas as três propriedades de obje para cada propriedade, registramos uma string que consiste no nome da propriedade (ou seja, sua chave) e seu valor correspondente.

var obj = {a: 1, b: 2, c: 3};

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

Inicializamos o loop com uma variável, prop, que conterá um nome de propriedade diferente (também conhecido como chave) em cada iteração das propriedades do objeto. O código especificado dentro do bloco será executado em cada iteração.

Aqui está uma pequena demonstração para demonstrar isso (clique em Resultado para ver a saída):

Dentro do loop, em cada iteração, registramos um dos nomes e valores de propriedade do objeto no console.

Outra maneira de iterar sobre as propriedades de um objeto é passando o objeto dentro Object.entries() e chamando o método. Isso retornará todas as propriedades enumeráveis ​​desse objeto dentro de um array multidimensional (array de arrays):

const obj = {a: 1, b: 2, c: 3};

let result = Object.entries(obj)

console.log(result)
// [["a", 1], ["b", 2], ["c", 3]]

Em seguida, podemos percorrer isso usando qualquer um dos métodos do iterador de matriz:

Object.entries(obj).forEach(entry => {
  // do something
})

Object.entries(obj).map(entry => {
  // do something
})

Object.entries(obj).every(entry => {
  // do something
})

Você também pode usar um for...of ciclo:

for (const entry of Object.entries(obj)) {
  // do something
}

for (const [key, value] of Object.entries(obj)) {
  // do something
}

Aqui estão algumas demonstrações:

Aqui, como obtemos um array consistindo da chave e do valor em cada iteração, simplesmente os acessamos com entry[0] e entry[1] respectivamente. Se você quiser apenas as chaves em vez da chave e do valor, use Object.keys() no lugar de Object.entries().

for...of é basicamente o mesmo:

Conclusão

Essas são as maneiras pelas quais podemos iterar facilmente as propriedades e chaves de um objeto em JavaScript. Confira nossos posts sobre JavaScript para mais artigos e tutoriais.