Estou tendo dificuldade em entender o conceito, principalmente com a variável i.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Estou tendo dificuldade em entender o conceito, principalmente com a variável i.
Oi Pedro! Tudo bem?
O loop for é uma estrutura que permite repetir um bloco de código várias vezes. Ele é muito útil quando você sabe exatamente quantas vezes quer que o código seja repetido.
Estrutura do for:
Aqui está a estrutura básica de um loop for:
for (inicialização; condição; incremento) {
// Código a ser repetido
}
Inicialização:
i (de "índice").let i = 0; (começa a contagem do zero).Condição:
i < 10; (o loop vai rodar enquanto i for menor que 10).Incremento:
i++ (aumenta i em 1 a cada loop).Dentro do contexto do projeto amigo secreto:
function atualizarListaAmigos() {
const listaAmigos = document.getElementById('listaAmigos'); // 1
limparLista('listaAmigos'); // 2
for (let i = 0; i < amigos.length; i++) { // 3
let amigo = document.createElement('li'); // 4
amigo.textContent = amigos[i]; // 5
listaAmigos.appendChild(amigo); // 6
}
}
const listaAmigos = document.getElementById('listaAmigos');:
listaAmigos (uma lista <ul>) e armazenando ele na variável listaAmigos.limparLista('listaAmigos');:
<li>) existentes. Isso garante que a lista seja atualizada do zero.for (let i = 0; i < amigos.length; i++) {:
for. Ele vai percorrer o array amigos (que é uma lista de nomes).let i = 0; → Começa a contagem do zero.i < amigos.length; → O loop continua enquanto i for menor que o número de elementos no array amigos.i++ → Aumenta i em 1 a cada repetição.let amigo = document.createElement('li');:
<li> (item de lista) e armazenamos ele na variável amigo.amigo.textContent = amigos[i];:
<li> criado. O conteúdo será o nome do amigo na posição i do array amigos.listaAmigos.appendChild(amigo);:
<li> criado como filho da lista listaAmigos. Isso faz com que o nome do amigo apareça na lista da página.Espero ter ajudado.