Transformando um objeto em um array em JavaScript: Métodos `Object.entries()`, `Object.keys()`, e `Object.values()`

Como transformar um objeto em um array (Object.entries, Object.keys, Object.values)?

Em JavaScript, objetos são amplamente usados para representar dados estruturados em pares chave-valor. No entanto, em muitas situações, pode ser necessário transformar um objeto em um array para facilitar a iteração ou manipulação dos dados. Felizmente, o JavaScript oferece três métodos poderosos — Object.entries(), Object.keys() e Object.values() — que podem ser usados para converter objetos em arrays de maneira eficiente. Vamos analisar cada um deles e suas diferenças.

Usando Object.keys()

O método Object.keys() retorna um array contendo todas as chaves (propriedades) de um objeto. Ele é útil quando você precisa de um array com as chaves do objeto, sem os valores associados a elas.

Exemplo de código com Object.keys():

let pessoa = { nome: 'João', idade: 25, cidade: 'São Paulo' };
let chaves = Object.keys(pessoa);
console.log(chaves);  // Exibe ['nome', 'idade', 'cidade']

Neste exemplo, Object.keys(pessoa) retorna um array com as chaves do objeto pessoa. Essas chaves são armazenadas em um novo array chamado chaves.

Características de Object.keys()

• Retorna um array de chaves: O método retorna todas as chaves enumeráveis de um objeto.
• Não retorna valores: Apenas as chaves do objeto são retornadas, sem os valores associados.
• Não retorna propriedades herdadas: Object.keys() só retorna as propriedades próprias do objeto, não as herdadas da cadeia de protótipos.

Usando Object.values()

O método Object.values() é similar ao Object.keys(), mas, em vez de retornar as chaves, ele retorna um array contendo todos os valores das propriedades do objeto.

Exemplo de código com Object.values():

let pessoa = { nome: 'João', idade: 25, cidade: 'São Paulo' };
let valores = Object.values(pessoa);
console.log(valores);  // Exibe ['João', 25, 'São Paulo']

Aqui, Object.values(pessoa) retorna um array com os valores das propriedades de pessoa, que são armazenados no array valores.

Características de Object.values()

• Retorna um array de valores: O método retorna um array contendo os valores das propriedades do objeto.
• Ignora a estrutura: Ele não retorna os nomes das propriedades, mas apenas os valores associados a elas.
• Somente propriedades próprias: Assim como Object.keys(), ele retorna apenas as propriedades do próprio objeto, não as herdadas.

Usando Object.entries()

O método Object.entries() oferece uma maneira mais detalhada de transformar um objeto em um array. Em vez de apenas retornar as chaves ou os valores, ele retorna um array contendo pares chave-valor. Cada elemento do array é um array de dois elementos: o primeiro é a chave e o segundo é o valor.

Exemplo de código com Object.entries():

let pessoa = { nome: 'João', idade: 25, cidade: 'São Paulo' };
let entradas = Object.entries(pessoa);
console.log(entradas);  // Exibe [['nome', 'João'], ['idade', 25], ['cidade', 'São Paulo']]

Neste exemplo, Object.entries(pessoa) retorna um array de arrays, onde cada sub-array contém a chave e o valor de uma propriedade do objeto pessoa.

Características de Object.entries()

• Retorna pares chave-valor: O método retorna um array de arrays, cada um contendo um par chave-valor.
• Útil para iteração: Esse formato é muito útil para iterar sobre o objeto com um loop for...of ou métodos como map() e reduce().
• Propriedades próprias: Assim como os outros métodos, ele retorna apenas as propriedades do objeto, sem incluir as propriedades herdadas.

Comparando os métodos

Quando usar cada método?

• Use Object.keys() quando precisar de um array contendo as chaves do objeto, como em situações onde você precisa iterar sobre as propriedades ou verificar quais propriedades existem.
• Use Object.values() quando estiver interessado nos valores das propriedades de um objeto e não nas chaves.
• Use Object.entries() quando precisar de ambos, chaves e valores, para manipulação de dados ou iteração sobre um objeto de forma mais estruturada.

Exemplo de uso combinado de Object.keys(), Object.values() e Object.entries()

Esses métodos podem ser combinados para realizar operações mais complexas, como ao iterar sobre as propriedades de um objeto e manipular tanto as chaves quanto os valores.

Exemplo de código:

let pessoa = { nome: 'João', idade: 25, cidade: 'São Paulo' };

Object.entries(pessoa).forEach(([chave, valor]) => {
  console.log(`${chave}: ${valor}`);
});
// Exibe 'nome: João', 'idade: 25', 'cidade: São Paulo'

Aqui, o método Object.entries() é usado para obter pares chave-valor do objeto, e um forEach() é usado para iterar sobre esses pares.

Conclusão

Transformar um objeto em um array é uma operação comum e útil ao trabalhar com dados em JavaScript. Os métodos Object.keys(), Object.values() e Object.entries() oferecem soluções simples e eficientes para extrair informações de objetos. A escolha do método adequado depende da sua necessidade, seja para acessar apenas as chaves, os valores ou ambos. Saber quando e como usar esses métodos vai facilitar a manipulação e iteração de dados em seu código.

Quando usar Object.keys(), Object.values() e Object.entries() para transformar objetos

Transformar objetos em arrays é essencial quando se trabalha com dados que precisam ser manipulados de maneira mais dinâmica ou iterativa. Usar métodos como Object.keys(), Object.values() e Object.entries() fornece flexibilidade para acessar diferentes aspectos de um objeto, seja suas chaves, valores ou ambos. Ao combinar esses métodos com outras técnicas de manipulação de arrays, como map() ou reduce(), você pode realizar operações complexas de forma simples e eficaz.

Algumas aplicações:

• Extrair chaves ou valores de objetos para facilitar operações em loops e funções de alta ordem.
• Trabalhar com objetos de configurações e transformá-los em arrays para manipulação ou validação.
• Usar Object.entries() para manipular dados estruturados ou trabalhar com objetos dinâmicos que contêm informações chave-valor.
• Integrar dados de objetos em outras estruturas, como quando você precisa combinar dados em formatos mais adequados para exibição ou armazenamento.

Dicas para quem está começando

• Use Object.keys() se precisar de um array apenas com as chaves de um objeto, como ao iterar sobre as propriedades do objeto.
• Experimente usar Object.entries() para obter tanto as chaves quanto os valores de um objeto de forma simples e eficiente.
• Se você precisar de apenas os valores de um objeto, use Object.values() para obter um array desses valores.
• Combinando esses métodos com funções como map() ou forEach(), você pode processar rapidamente os dados de um objeto e transformar esses dados conforme necessário.

Compartilhe este tutorial