Percorrendo array com Javascript usando forEach

CursoPHP Moderno: Criando uma aplicação com área administrativa

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.