Percorrer as propriedades de um objeto com JavaScript

Veja as várias formas de fazer loop nas propriedades de um objeto

Vamos aprender como fazer loop nas propriedades de um objeto com JavaScript. Para servir de exemplo, vamos criar um conversor de medidas que vai nos permitir converter um valor em metros para outras unidades.

Primeiro, vamos criar um objeto para guardar as medidas de referência, a base para conversão será o valor de 1 metro:

var medidas = {

polegadas:  39.37007874,

pes: 3.280839895,

jardas: 1.093613298,

milhas: 0.00062137119,

milhas_nauticas: 0.0005399

}

A melhor forma de fazer um loop pelo conteúdo do objeto "medidas" é converter ele para array. Vamos utiizar para isso a API "Object" do JavaScript. Ela possui 3 métodos que podem nos ajudar com isso, que são os seguintes:

Object.keys

Object.values

Object.entries

O Object.keys cria um array contendo apenas as propriedades do objeto.

console.log(Object.keys(medidas))

Já o Object.values cria um array apenas com os valores.

console.log(Object.values(medidas))

Por último, o Object.entries cria um array com dois items, o primeiro é a propriedade, e o segundo é o valor.

console.log(Object.entries(medidas))

Com base no que vimos até agora, vamos utilizar o Object.entries para pegar o nosso objeto de medidas e fazer um loop, convertendo um determinado valor para cada uma das propridades que inserimos neste objeto. Vamos separar cada chave e valor.  O código vai ficar assim:

var valor_informado_medida = 1;

for (let [key, value] of Object.entries(medidas)) {

   var conversao = value * valor_informado_medida;

    console.log("Valor em " + key + ":" + conversao);

}

O retorno que vamos ter é o seguinte:

O valor em metros que foi informado foi:1

Valor em polegadas:39.37007874

Valor em pes:3.280839895

Valor em jardas:1.093613298

Valor em milhas:0.00062137119

Valor em milhas_nauticas:0.0005399

Perceba que a resposta veio com muitas casas decimais. Para o resultado ficar mais amigável, vamos reduzir o número de casas decimais para 4. Uma forma de fazer isso seria utilizar o método "toFixed". Nosso loop ficaria assim:

for (let [key, value] of Object.entries(medidas)) {

var conversao = value * valor_informado_medida;

    console.log("Valor em " + key + ":" + conversao.toFixed(4));

}

Apesar de funcionar, existe uma observação, o número vai acabar sendo convertido para string. Para definir uma certa quantidade de casas decimais sem fazer a conversão para string, você vai precisar usar o método "round" do objeto "Math". 

var resultado = 39.37007874;

Math.round(resultado * 100) / 100;

Neste exemplo, o resultado vai ser convertido para duas casas decimais, perceba que para isso fizemos primeiro uma multiplicação por 100 e depois fizemos a divisão também por 100. Para aumentar o número de casas, basta acrescentar zeros. Se você quiser 3 casas, basta multiplicar por 1000 e dividir por 1000.

Se você quiser trabalhar com apenas uma medida, pode acessar direto o objeto "medidas" informando a propriedade desejada.

var valor = 10;

var resultado = valor * medidas['milhas'];

resultado = Math.round(resultado * 100) / 100;

console.log(resultado);

Segue abaixo uma função para você fazer a conversão em metros de uma medida a sua escolha:

function converterMedida(valor, medida){

var medidas = {

polegadas:  39.37007874,

pes: 3.280839895,

jardas: 1.093613298,

milhas: 0.00062137119,

milhas_nauticas: 0.0005399

}

var resultado = 0;

if (valor > 0){

resultado = valor * medidas[medida];

resultado = Math.round(resultado * 100) / 100;

}

return resultado;

}

console.log(converterMedida(10000, 'milhas'));

 

Quer conferir mais dicas sobre JavaScript? Clique aqui e veja mais dicas!