Como Iterar Elegantemente em Propriedades de Objetos Em Javascript (ES6+)?

JavaScript é uma das linguagens de programação que lhe permite iterar em propriedades de Objetos sem usar qualquer ferramenta complexa ou API.

Neste artigo, vamos explorar, como esta técnica simples evoluiu ao longo dos anos e Porque temos algo agora, que pode ser classificado como elegante!

Demos uma olhada no código abaixo e depois podemos falar mais a fundo

var obj = { // Yes 'var'...bad old days!
a: 1,
b: 2,
c: 3,
};for (var key in obj) {
if (obj.hasOwnProperty(key)) { // <- Ahh...What's this??
var value = obj;
console.log(key, ' : ', value);
}
}

Output:

a : 1
b : 2
c : 3

Muitos de nós perdemos a verificação obj.hasOwnProperty

Em JavaScript, quando você está iterando, é muito crítico evitar a iteração nas propriedades pai do Objeto ( e são propriedades pai e é pai…Você tem a idéia!). Faltar pode resultar em um código lento.

Felizmente, a maioria de nós trabalhando com algum tipo de ferramenta de impressão que vai dar um aviso se você perder esta verificação.

Modern way – Iteração em ES6+

Agora vamos passar para JavaScript moderno ou ES6+!

Conhecendo este problema, a equipe da ECMA adicionou suporte para iteração simples em ES6.

E começa com – Object.entries()

O método Object.entries() devolve um array da propriedade enumerável de um determinado objeto pares, na mesma ordem que o fornecido por um for…in loop (a diferença é que um for-in loop enumera propriedades na cadeia do protótipo também).

Por exemplo, abaixo do código

const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));

dará saída como abaixo, Um array de arrays de dois elementos, onde no índice: 0, teremos chave e em index:1, teremos valor

Agora esta simples função levará a uma elegante iteração de objetos, confira abaixo o código.

Passo 1: Comece com `Objeto.entries`

const obj = {
a: 1,
b: 2,
c: 3
};for (const entry of Object.entries(obj)) {
console.log(`key: ${entry} : value: ${entry}`);
}

Output:

key: a : value: 1
key: b : value: 2
key: c : value: 3

Já foi bom, mas vamos torná-lo espectacular

Passo 2: Usar Destruição

Vamos entender a “entrada” se atualizarmos o acima para loop como abaixo

...for (const entry of Object.entries(obj)) {
console.log(entry);
}

a saída será como abaixo

Hmm….o que temos aqui?

Bem, cada entrada é um Array com exactamente dois elementos (chamem-lhe ‘tuple’), por isso, usando a desestruturação do ES6 Array, podemos escrever código como

const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);

Vamos aplicar o mesmo conceito para loop

const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}

Woohoo… é de facto Fantástico!

Iteração com forEach

Quer aplicar a mesma técnica nas funções integradas no Array, tente abaixo o código

const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});

Output:

a : 1
b : 2
c : 3