JavaScript Object para Array: Convertendo objetos em arrays
Conversão de objetos em arrays: uma visão geral do JavaScript Object para Array.
Publicado em 3 de agosto de 2023
Glossário
Convertendo objetos em arrays: uma visão geral do JavaScript Object para Array
Introdução
O JavaScript é uma linguagem de programação muito popular e versátil, amplamente usada para criar aplicativos e sites interativos. Uma das características mais úteis do JavaScript é a capacidade de manipular objetos e arrays. Neste contexto, a conversão de objetos em arrays é uma tarefa comumente realizada pelos desenvolvedores. Neste artigo, daremos uma visão geral de como converter objetos em arrays utilizando JavaScript.
Abordagens comuns para conversão
Existem várias abordagens para realizar essa conversão e, a seguir, apresentaremos algumas das mais comuns:
-
Utilizando o método Object.keys
Uma maneira simples de converter um objeto em array é utilizando o método Object.keys. Esse método retorna um array com as chaves (propriedades) de um objeto. Podemos então utilizar esse array de chaves para acessar os valores correspondentes no objeto original. Veja o exemplo abaixo:
const objeto = { chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' };
const array = Object.keys(objeto).map(chave => objeto[chave]);
console.log(array); -
Utilizando o método Object.entries
Outra maneira de converter um objeto em array é utilizando o método Object.entries. Esse método retorna um array com pares de chave-valor do objeto. Podemos então utilizar esse array de pares para acessar tanto as chaves quanto os valores do objeto original. Veja o exemplo abaixo:
const objeto = { chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' };
const array = Object.entries(objeto).map(([chave, valor]) => valor);
console.log(array); -
Utilizando o spread operator
Uma abordagem mais moderna para converter um objeto em array é utilizando o spread operator do JavaScript. O spread operator permite que expandamos os elementos de um objeto ou array em outro objeto ou array. Veja o exemplo abaixo:
const objeto = { chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' };
const array = [...Object.values(objeto)];
console.log(array);
Métodos adicionais para conversão
Além das abordagens mencionadas anteriormente, existem outras formas de converter um objeto em array usando JavaScript. A seguir, apresentaremos mais dois métodos populares:
-
Utilizando o método Object.values
O método Object.values retorna um array com os valores das propriedades de um objeto. Podemos utilizar esse método para obter diretamente um array com os valores do objeto, sem a necessidade de percorrer as chaves. Veja o exemplo abaixo:
const objeto = { chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' };
const array = Object.values(objeto);
console.log(array); -
Utilizando o for…in loop
O loop for…in é uma forma tradicional de percorrer as propriedades de um objeto. Podemos utilizar esse loop em conjunto com um array vazio para armazenar os valores do objeto em um novo array. Veja o exemplo abaixo:
const objeto = { chave1: 'valor1', chave2: 'valor2', chave3: 'valor3' };
const array = [];
for (let chave in objeto) {
array.push(objeto[chave]);
}
console.log(array);
Converter objetos complexos em arrays
Ao lidar com objetos complexos, que possuem propriedades aninhadas ou estruturas de dados mais complexas, podemos utilizar técnicas específicas para converter esses objetos em arrays. Vamos explorar algumas abordagens abaixo:
-
Utilizando a combinação de Object.keys, map e concat
Uma maneira de converter objetos complexos em arrays é utilizar a combinação dos métodos Object.keys, map e concat. O método Object.keys retorna um array com as chaves do objeto, o método map nos permite percorrer esse array de chaves e obter os valores correspondentes no objeto original, enquanto o método concat concatena os arrays resultantes em um único array. Veja o exemplo abaixo:
const objetoComplexo = {
chave1: 'valor1',
chave2: {
subchave1: 'valor2',
subchave2: 'valor3'
},
chave3: [1, 2, 3]
};
const arrayComplexo = Object.keys(objetoComplexo)
.map(chave => {
const valor = objetoComplexo[chave];
if (typeof valor === 'object') {
return Object.values(valor);
}
return valor;
})
.reduce((acc, curr) => acc.concat(curr), []);
console.log(arrayComplexo); -
Utilizando a biblioteca Lodash
A biblioteca Lodash é amplamente utilizada no desenvolvimento JavaScript e possui uma vasta coleção de funções úteis para manipulação de objetos, arrays e outros tipos de dados. Uma das funções do Lodash que pode ser utilizada para converter objetos complexos em arrays é a função flattenDeep. Essa função percorre recursivamente um objeto ou array e retorna um novo array com todos os valores encontrados. Veja o exemplo abaixo:
const objetoComplexo = {
chave1: 'valor1',
chave2: {
subchave1: 'valor2',
subchave2: 'valor3'
},
chave3: [1, 2, 3]
};
const arrayComplexo = _.flattenDeep(objetoComplexo);
console.log(arrayComplexo);
Considerações finais
A conversão de objetos em arrays utilizando JavaScript é uma tarefa fundamental no desenvolvimento web. Essa habilidade permite acessar e manipular os dados de forma mais eficiente e flexível. Ao longo deste artigo, apresentamos diversas abordagens e métodos para converter objetos em arrays, desde os mais simples aos mais complexos.
É importante lembrar que a escolha do método a ser utilizado depende do contexto e dos requisitos específicos do projeto. Além disso, é sempre recomendado utilizar boas práticas de programação, como a manutenção de um código limpo e legível, o uso de comentários para explicar o propósito do código e a realização de testes para garantir a corretude da conversão.
Em suma, a conversão de objetos em arrays com JavaScript é uma habilidade essencial para todo desenvolvedor que trabalha com essa linguagem. Dominar as técnicas apresentadas neste artigo permitirá que você seja mais eficiente e produtivo na manipulação de dados em seus projetos. JavaScript Object para Array: Convertendo objetos em arrays é um conhecimento valioso que o ajudará a desenvolver aplicações mais robustas e poderosas.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
