Duvidas em array | JavaScript: programando na linguagem da web

<!DOCTYPE html> <html> <body> <h2>JavaScript Arrays</h2> <p>The best way to loop through an array is using a standard for loop:</p> <p id="demo"></p> <script> var fruits, text, fLen, i; fruits = ["Banana", "Orange", "Apple", "Mango"]; fLen = fruits.length; text = "<ul>"; for (i = 0; i < fLen; i++) { text += "<li>" + fruits[i] + "</li>"; } text += "</ul>"; document.getElementById("demo").innerHTML = text; </script> </body> </html>

Oi, Daniel, tudo bem?

Vamos por partes. As dificuldades que você terá em caminho de estudo no mundo da programação serão muitos e nunca deixamos de ter, porque sempre estareremos estudando, em busca de nos aprofundar e os desafios aparecem. Então, como muito estudo e muita prática conseguimos entender os conceitos de programação.

Ao código, ele criou varíaveis em uma só linha, que podoeria ser assim:

var  = fruits;
var = text;
var = flex;
var = i;

A variável fruits é um array com quatro strings: ["Banana", "Orange", "Apple", "Mango"];. Já a variável flen armazena o tamanho desse array, ou seja, é um array que contém 4 objetos.

A variável text está criando uma tag ul de lista.

O que o for vai fazer é fazer um loop cuja quantidade voltas será definida pelo tamanho do array, no caso, 4 voltas. Dentro do for, vamos chamar a variável text, que é um uma tag ul e dentro dela, vamos chamar o array fruits[i] com o índice i*, esse índice armazena os obejetos do nosso array, que são so nomes das frutas. A tag *li cria uma lista de elementos não ordenados. E esse += faz é iterar a cada loop, ou seja, a cada volta, ele acrecenta um objeto do array.

E isso tudo vai ser apresentado dentro do id="demo" cujo o innerHTHML tem o poder de acrescentar elementos no navegador.

Sobre reescrever o código de forma mais simples, ele já está de forma simplificada. A única coisa que está um pouco abastrata é como as variáveis foram declaradas, podendo ser declaradas da forma como fiz acima:

Veja aqui na documentação mais sobre arrays em JS: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Espero ter teajudado!