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 ```js 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: ```js 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. ```js 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. ```js 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. ```js 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. ```js 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. ```js 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: ```js console.log(pessoas[0].endereco.rua); // Saída: Rua Exemplo ``` ###Alterando Dados Aninhados Para alterar o endereço: ```js 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.

Javascript

Acessibilidade e JavaScript Criando Experiências Web Inclusivas

Trabalhando com Arrays de Objetos em JavaScript