Laços de repetição em arrays (Versão vídeo)

Está é apenas a captura de tela de nosso passo a passo interativo, preparado para deixar a legendagem e tradução mais fácil. É melhor assistir nossos passo a passo aqui.

https://www.khanacademy.org/cs/programming/

Voltamos com um programa
que imprime array de amigos.

Mas tem algo nisso que me deixa irritada.

Sempre que adiciono um novo amigo no array
tenho que adicionar um novo texto no fim.

Digamos que adicione Winston.

Ele não irá aparecer automaticamente.

Para aparecer, digito text(MyFriends[3])
e mudamos a posição y e veremos Winston.

É muito trabalhoso.

Sempre que adicionar algo ao array, quero
que o texto seja adicionado automaticamente

Você se lembra de quando aprendemos laços?

Laços de repetição foram um bom modo de
repetir o mesmo trecho de código várias vezes.

Como, se quiséssemos ter várias árvores
enfileiradas ou um monte de balões.

Laços de repetição é uma excelente maneira
de rodar um pedaço de código em cada array

De fato, você verá laço de repetição em
quase todas as vezes que ver um array.

Eles trabalham muito bem em conjunto.

Vamos usar laços de repetição
para imprimir na tela nomes de amigos,

ao invés de usar todos esses comandos,
para mostrar o que eu quero dizer.

Comecemos com três perguntas que sempre
nos fazemos quando criamos um laço.

Primeiro, o que eu quero repetir? Veja.
O que é repetido? O comando texto.

O que quero mudar toda vez?
Bem, deixe-me ver o que é diferente.

A posição 'y' e o atual 'index', certo ?

O número do amigo e a posição 'y'.

E quantas vezes devo repetir? Bem,
repetiremos até que não haja mais amigos.

Então agora sabemos o que queremos,
e podemos criar nosso laço.

Começamos com a variável counter para
sabermos em que lugar do laço estamos.

Então vou dizer var friendNum = 0;

Inicializaremos como zero, pois ele é o
o primeiro elemento do array, e não 1.

Teremos o nosso laço while, então diremos
while(friendNum < myfriends.length).

Iremos comparar o valor atual de "counter"
com a variável número de objetos no array.

Dentro do laço, será onde
usaremo o comando "text".

Diremos, text(myFriends)
- e aqui, ao invés do número

colocaremos friendNum porque representa
o número atual.

E então colocaremos apenas uma posição.

Isto nos dá um pequeno erro de
repetição infinita

porque não mudamos de fato nada
no friendNum.

Lembre-se, precisamos incrementar
friendNum toda vez

caso contrário o laço sempre se repetirá
pois a condição sempre será verdadeira.

Vi que algo aconteceu. Comentarei o outro
código para poder ver o que houve.

O que temos é que mostramos todos os
nomes, mas eles um em cima do outro.

Então, precisamos mudar posição 'y'.

Vamos dizer apenas 'friendNum * 30'.

Ficou bom, mas Shophia está fora da tela e
ela não vai ficar feliz se descobrir isso.

Então, vamos adicionar apenas 30. Agora
todos aparecendo com 30.

Agora você verá que temos um laço para
imprimindo nosso array.

Isso significa que se adicionarmos mais
pessoas como OhNoesGuy, ou até mesmo Sal,

se eu incluí-los no array, então Sal será
meu amigo. Legal! Agora ele é meu colega.

Você vê que aparece automaticamente novos
amigos pois está percorrendo todo o array.

Então podemos apagar nosso código antigo.
Não precisamos mais dele.

Vamos dar uma olhada nesse código
novamente e revisar o que ele faz.

Começamos com friendNum = 0;.

Verificamos se friendNum é menor que
o tamanho atual.

Então imagine que zero é menor que seis.
O que é verdade.

Então vamos pra cá e dizemos que 'text',
é igual valor de firendNum.

Isso vai virar zero, a primeira vez.

E então 30 mais zero 30.

Sophia aparece na posição 10 e 30.
É o que isso faz.

E então friendNum++, e vira 1.

E código recomeça e valida, "Ok, 1 é menor
que o myFriends.Lenght? Sim é."

E continua e continua e continua.

E então chegamos ao Sal, lembre,

Sal é atualmente o sexto elemento
no array, mas seu índice é 5,

já que começamos com zero.

Então, cinco é menor que seis? Sim.

Então vai imprimir 'myFriends' cinco.

E então vira seis e validamos.
"Seis é menor que seis?" Não, é igual.

Então será falso. Nunca
apresentaremos o sexto elemento.

O que é bom porque não
há nada na sexta posição.

Há um sexto elemento,
mas não há nada dentro.

Pode ser bem confuso, o fato de ser
zero e um, mas você pega o jeito.

Muito bem, esse é nosso laço.

Agora, se você quiser, você pode usar
um laço do tipo "for" se você preferir.

Para laços do tipo "for", dizemos apenas
'for' e var friendNum=0; e a condição .

friendNum < myFriends.length;

e o incremento: friendNum++

E então dentro do laço 'for', podemos
colocar somente essa linha de código aqui.

E apenas mudarei o 'x'
para que você possa ver.

O resultado é o mesmo.

Você que decide qual usar, mas a questão é
usar um laço com o array dará mais poder.

Legendado por [Valter Bigeli]
Revisado por [Fernando dos Reis]