Listar com for ou forEach? JavaScript dica 15

Nesta dica listamos os elementos de um array em JavaScript utilizando for e forEach.

Assista ao vídeo:

Se você caiu nesta dica de paraquedas preciso informar que este é um curso em formato de dicas e, eu ainda não nenhum exemplo do laço de repetição for.

A seguir temos o código fonte HTML necessário para realizar esta dica.

<!DOCTYPE html>
<html>
    <head>
        <title>for e forEach</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>for e forEach</h1>
        <script src="for.js"></script>
    </body>
</html>

E a seguir o código fonte JS inicial desta dica.

document.write("<h1>*********************** Exemplo básico de for **********************</h1>");

document.write("<h1>******************** Listando array com forEach ********************</h1>");

var array1 = new Array("oi tudo bem?","teste teste","em busca","Busca",
"do do do","código go goW","teste","codigo");
document.write("<h1>Array Exemplo:</br>"+array1.join(" - ")+"</br></br></br></h1>");

document.write("<h1>********************** Listando array com for **********************</h1>");

var array2 = new Array("oi tudo bem?","teste teste","em busca","Busca",
"do do do","código go goW","teste","codigo");

document.write("<h1>Array Exemplo:</br>"+array2.join(" - ")+"</br></br></br></h1>");

for

Para utilizar um for em JavaScript precisamos criar uma variável. Eu posso criar essa variável dentro do for, mas nesse exemplo vou cria-la fora do meu laço de repetição.

var x;

Como é um exemplo básico vamos fazer o for contar de 0 (zero) até 10.

for (x=0; x<=10; x++) {
document.write("<h1>"+x+"</h1>");
}

Eu utilizei um document.write para mostrar o resultado em nosso navegador, mas vale a pena lembrar que você pode utilizar um alert ou até console.log. Também utilizei a tag h1 para que os números apareçam maiores no vídeo.

forEach

Agora vamos conferir um exemplo de listar os elementos de um array em JavaScript utilizando o método forEach.

forEach é um método, então, antes de tudo, eu preciso declarar o meu objeto.

array1.

Agora sim declarar o método forEach.

array1.forEach();

Para que o meu forEach funcione eu preciso criar uma função dentro dele e, declarar dois parâmetros.

array1.forEach(function(valor,indice) {});

O primeiro parâmetro é relacionado ao valor de cada elemento do array, e o segundo parâmetro ao índice de cada elemento.

E como já é um padrão deste curso de dicas, utilizo outro document.write para para mostrar o resultado do nosso forEach.

array1.forEach(function(valor,indice) {
document.write("<h1>Índice: "+indice+". Valor: "+valor+"</h1>");
});

Quando for listar os elementos de um array em JavaScript é indicado que se utilize forEach e não for. Mas por uma questão de didática, vamos conferir um exemplo onde listamos os elementos de um array a partir de um for.

Primeiramente crio uma variável.

var d;

Crio o meu laço for.

for (d=0; d<=array2.length; d++) {};

Neste for eu utilizei o método lenght, pois assim o nosso for terá como base a quantidade de elementos que nosso array tem.

E para mostrar o resultado um document.write dentro do for.

document.write("<h1>Índice: "+d+". Valor: "+array2[d]+"</h1>");

Código fonte JavaScript (completo)

document.write("<h1>*****************************************************************</br>*********************** Exemplo básico de for **********************</br>*****************************************************************</h1>");

var x;
for (x=0; x<=10; x++) {
    document.write("<h1>"+x+"</h1>");
}

document.write("<h1>*****************************************************************</br>******************** Listando array com forEach ********************</br>*****************************************************************</h1>");

var array1 = new Array("oi tudo bem?","teste teste","em busca","Busca",
                       "do do do","código go goW","teste","codigo");
document.write("<h1>Array Exemplo:</br>"+array1.join(" - ")+"</br></br></br></h1>");

array1.forEach(function(valor,indice) {
               document.write("<h1>Índice: "+indice+". Valor: "+valor+"</h1>");
               });

document.write("<h1>*****************************************************************</br>********************** Listando array com for **********************</br>*****************************************************************</h1>");

var array2 = new Array("oi tudo bem?","teste teste","em busca","Busca",
                       "do do do","código go goW","teste","codigo");

document.write("<h1>Array Exemplo:</br>"+array2.join(" - ")+"</br></br></br></h1>");

var d;

for (d=0; d<=array2.length; d++) {
    document.write("<h1>Índice: "+d+". Valor: "+array2[d]+"</h1>");

Dica

Em dicas anteriores eu já falei que este código fonte é seu, então, a primeira dica que eu dou é que você altere os nomes dos arrays. Já vimos alguns métodos ao decorrer dessas 15 primeiras dicas, então que tal você listar os elementos desse array em ordem crescente e decrescente?

Espero que esta dica tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.