Iterar sobre arrays de objetos é uma tarefa comum em JavaScript. Vamos explorar diferentes métodos para fazer isso, usando um exemplo prático.
Exemplo de Array de Objetos
const pessoas = [
{
nome: "Rodrigo",
idade: 38,
salario: 5500,
nasc: "31/10/1980",
dirige: true,
endereco: {
rua: "Rua Exemplo",
numero: 123,
cidade: "São Paulo",
pais: "Brasil"
}
},
{
nome: "Daniele",
idade: 37,
salario: 3500,
nasc: "14/12/1980",
dirige: true,
endereco: {
rua: "Rua Sonhos",
numero: 31,
cidade: "São Caetano",
pais: "Brasil"
}
},
{
nome: "Henry",
idade: 8,
salario: null,
nasc: "09/11/2015",
dirige: false,
endereco: {
rua: "Av. do Estudo",
numero: 76,
cidade: "Nova York",
pais: "Estados Unidos"
}
},
{
nome: "Emily",
idade: ,
salario: 5500,
nasc: "12/03/2018",
dirige: false,
endereco: {
rua: "Travessa da Felicidade",
numero: 8,
cidade: "Dublin",
pais: "Irlanda"
}
}
];
##Acessando Elementos do Array
Podemos acessar elementos específicos do array usando índices. Por exemplo, para acessar o nome do primeiro objeto, utilizamos:
console.log(pessoas[0].nome); // Saída: Rodrigo
Iterando sobre o Array
Usando forEach
Este método executa uma função para cada elemento do array.
pessoas.forEach(pessoa => {
console.log(pessoa.nome);
});
Usando map
O map
cria um novo array com os resultados de uma função aplicada a cada elemento.
const nomes = pessoas.map(pessoa => pessoa.nome);
console.log(nomes);
Usando filter
O filter
gera um novo array contendo elementos que satisfazem uma condição.
const adultos = pessoas.filter(pessoa => pessoa.idade >= 18);
console.log(adultos);
Usando find
O método find
retorna o primeiro elemento que satisfaz a condição especificada.
const rodrigo = pessoas.find(pessoa => pessoa.nome === "Rodrigo");
console.log(rodrigo);
Usando reduce
O método reduce
pode ser usado para reduzir todos os elementos do array a um único valor, como a soma dos salários.
const totalSalario = pessoas.reduce((total, pessoa) => {
return total + (pessoa.salario || 0);
}, 0);
console.log(totalSalario);
##Trabalhando com Objetos Aninhados
Vamos acessar e manipular dados nos objetos aninhados, como o endereço.
###Acessando Dados Aninhados
Para acessar a rua do primeiro objeto:
console.log(pessoas[0].endereco.rua); // Saída: Rua Exemplo
###Alterando Dados Aninhados
Para alterar o endereço:
pessoas[0].endereco.rua = "Nova Rua Exemplo";
##Conclusão
Este tutorial abordou várias maneiras de iterar e manipular arrays de objetos em JavaScript. Essas técnicas são fundamentais para o desenvolvimento de aplicações eficientes e dinâmicas.
Lembre-se de que cada método tem suas particularidades e deve ser escolhido com base nas necessidades específicas do seu projeto.