Percorrer as propriedades de um objeto com JavaScript

Percorrer as propriedades de um objeto com JavaScript

Vamos aprender como fazer loop nas propriedades de um objeto com JavaScript, desta forrma será possível percorrer um objeto 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'));

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

Outros conteudos que podem ser de seu interesse

Mascaras para campos de formularios com Javascript
02/08/2020JAVASCRIPT

Mascaras para campos de formularios com Javascript

Veja como criar máscaras para campos de formulários com Javascript

Saiba mais...
API REST em 30 segundos com NodeJS
30/12/2020JAVASCRIPT

API REST em 30 segundos com NodeJS

Nunca foi tão fácil prototipar uma API REST usando NodeJS

Saiba mais...

Conteúdo sobre banco de dados sem complicação!