Neste tutorial, vamos mostrar a utilização de 3 métodos simples e bem úteis para acessar diretamente chaves (keys) e valores (values) de um objeto ou de um array em JavaScript. São eles: Object.keys(), Object.values() e Object.entries().

Obs1: É importante lembrar que em JavaScript tanto um objeto como um array são tipos de dados definidos como objetos.

Obs2: Para saber mais sobre objetos usando JavaScript, leia: Criando objetos e o uso do "this" no JavaScript .

Diferenças básicas entre os 3 métodos:

• Object.keys(obj) – retorna um array de keys.
• Object.values(obj) – retorna uma array de values.
• Object.entries(obj) – retorna uma array de pares de [key, value].

1. Obtendo chaves e valores de um array

1.1. No exemplo abaixo vamos criar um array e obter diretamente as chaves (keys), valores (values) e entradas (entries) através dos métodos Object.keys(), Object.values() e Object.entries().

const lista = ['ovos','farinha','leite','fermento','açucar','cacau']
    
// retorna array com os "values" de "lista" e exibe na tela
document.querySelector("#values").innerHTML = Object.values(lista)
    
// retorna array com as "keys" do array "lista" e exibe na tela
document.querySelector("#keys").innerHTML = Object.keys(lista)
    
// retorna array com pares [keys, values] do array "lista" e exibe na tela
document.querySelector("#entries").innerHTML = Object.entries(lista)

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=231

1.2. Veja o resultado:

2. Obtendo chaves e valores de um objeto

2.1. No exemplo abaixo vamos criar um objeto e obter diretamente as chaves (keys), valores (values) e entradas (entries) através dos métodos Object.keys(), Object.values() e Object.entries().

let cliente = {
    	nome: "Pedro Álvares Cabral",
        idade: 54,
        local: "São Paulo - SP"
}
    
// retorna array com os "values" de "cliente" e exibe na tela
document.querySelector("#values").innerHTML = Object.values(cliente)

// retorna array com as "keys" do objeto "cliente" e exibe na tela
document.querySelector("#keys").innerHTML = Object.keys(cliente)

// retorna array com pares [keys, values] do objeto "cliente" e exibe na tela
document.querySelector("#entries").innerHTML = Object.entries(cliente)

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=232

2.2. Veja o resultado:

3. Exemplo de aplicação

3.1. Neste exemplo vamos criar um objeto com a descrição de alunos e suas respectivas notas. Usando os métodos Object.keys(), Object.values() e Object.entries() vamos obter o total de alunos e a média das suas notas.

3.1.1. Observe que para calcularmos o total de alunos utilizamos a propriedade length para obter o tamanho do array  (número de elementos) retornado pelo método Object.keys().

3.1.2. Para a soma das notas utilizamos o método reduce, que reduz o array retornado pelo método Object.values() à um único valor, que no caso é a soma de todos elementos do array. Para saber mais sobre reduce leia o tutorial: Formas de calcular a soma e a média dos itens de um array - JavaScript

3.1.3. Observe que no código abaixo usamos o nome da função média com acento. É importante frisar que em JavaScript a utilização de acentuação de variáveis e funções é permitida, porém, por uma questão de boas práticas de programação, não é recomendável utilizá-la.

let notasAlunos = {
   AlunoA: 7,
   AlunoB: 7.5,
   AlunoC: 8,
   AlunoD: 6
}
    
// Calcula o número de alunos
function conta(notasAlunos) {
    return Object.keys(notasAlunos).length;
}
    
// Calcula a média das notas
function média(notasAlunos) {
    return (Object.values(notasAlunos).reduce((a, b) => a + b, 0)) / conta(notasAlunos)
}
    
// exibe número de alunos
document.querySelector("#total").innerHTML = "Total de Alunos: " + conta(notasAlunos)

// exibe média das notas dos alunos
document.querySelector("#media").innerHTML = "Média notas dos alunos: " + média(notasAlunos)

// exibe alunos com as notas
document.querySelector("#entries").innerHTML = Object.entries(notasAlunos)

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=233

3.2. Veja o resultado do nosso exemplo abaixo:

 Documentação Oficial

1. [Object.keys()] » Sobre o método object.keys() - MDN Web Docs.

2. [Object.values()] » Sobre o método object.values() - MDN Web Docs.

3. [Object.entries()] » Sobre o método object.entries() - MDN Web Docs.

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários