Percorrendo array com Javascript usando forEach

Gunnar CorreaGunnar Correa09/12/2020 às 20:45:38 - 303 acessos

O método forEach retorna o item atual do array a cada iteração.


Que atire a primeira pedra aquele dev que nunca percorreu um array utilizando o método for! O método for é tão clássico e existente em diversos sistemas legados, que ganhou um companheiro para ajudar no árduo trabalho de percorrer arrays.

É muito importante afirmar que o forEach não é melhor ou substitui métodos como for e while, para entender isso, continue com a gente.

A proposta do método forEach (cuidado, o E se escreve na maiúscula), é literalmente acessar todos os índices do array, sem a necessidade de criar uma regra de saída, como no for e while, e por isso, ele é tão amado. Linguagens como PHP e C# por exemplo, já implementaram esse método a anos.

Recomendo fortemente que você acesse a documentação oficial para conhecer mais sobre o método e também consultar a guia Compatibilidade de Browser.

Pois bem, para entender e aprender como utiliza-lo, assista a nossa videoaula a seguir.

Agora que você entendeu e aprendeu a utilizar o método, já pode utilizar em seus futuros projeto, mas antes de finalizar, quero deixar uma última informação. Se você for utilizar bibliotecas como grunt e gulp para minificar o JS, lembre-se de incluir um transpilador como o Babel.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de produtos</title>

    <style>
        * {
            margin: 0 auto;
            padding: 0;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        .div {
            max-width: 300px;
            width: 100%
        }
    </style>
</head>

<body>

    <div class="div">
        <h1>Produtos</h1>

        <ul id="ulProdutos"></ul>

    </div>
    
    <script src="script.js"></script>
</body>

</html>
'use strict' //Aqui usamos o modo strict

//Array com os nossos produtos.
const listaProdutos = [
    'Leite',
    'Maça',
    'Chocolate',
    'Café',
    'Palha de aço',
    'PS5'
];

// listaProdutos.forEach(function(item){
//     console.log(item);
// });

//Acessamos o elemento ul
let ul = document.getElementById('ulProdutos');

//Percorremos todos os itens do array
listaProdutos.forEach(item => {

    //Criamos um elemento para o DOM
    let li = document.createElement('li');

    //Inserimos um texto para o elemento
    li.innerText = item;

    //Incluimos o elemento ao filho da UL
    ul.appendChild(li);
});

Por hora é isso, até a próxima.


javascript tutorial javascript array javascript foreach aprenda javascript javascript ninja programação com javascript javascript para iniciantes

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com