Web-Dev-For-Beginners/translations/pt/2-js-basics/4-arrays-loops

Fundamentos de JavaScript: Arrays e Ciclos

Sketchnote por Tomomi Imura

Questionário Pré-Aula

Questionário pré-aula

Esta lição aborda os fundamentos do JavaScript, a linguagem que proporciona interatividade na web. Nesta lição, vais aprender sobre arrays e ciclos, que são usados para manipular dados.

🎥 Clica nas imagens acima para vídeos sobre arrays e ciclos.

Podes fazer esta lição no Microsoft Learn!

Arrays

Trabalhar com dados é uma tarefa comum em qualquer linguagem, e é muito mais fácil quando os dados estão organizados num formato estrutural, como arrays. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que podes armazenar diferentes tipos de dados num único array.

✅ Arrays estão por todo o lado! Consegues pensar num exemplo da vida real de um array, como um conjunto de painéis solares?

A sintaxe de um array é um par de colchetes.

let myArray = [];

Este é um array vazio, mas os arrays podem ser declarados já preenchidos com dados. Os valores num array são separados por uma vírgula.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Os valores do array são atribuídos a um valor único chamado índice, um número inteiro que é atribuído com base na sua distância desde o início do array. No exemplo acima, o valor de string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Usa o índice com colchetes para recuperar, alterar ou inserir valores no array.

✅ Surpreende-te que os arrays começam no índice zero? Em algumas linguagens de programação, os índices começam em 1. Há uma história interessante sobre isto, que podes ler na Wikipedia.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Podes usar o índice para alterar um valor, assim:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

E podes inserir um novo valor num índice específico assim:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Uma forma mais comum de adicionar valores a um array é utilizando operadores de array como array.push()

Para descobrir quantos itens estão num array, usa a propriedade length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Experimenta tu mesmo! Usa o console do teu navegador para criar e manipular um array da tua própria criação.

Ciclos

Os ciclos permitem-nos realizar tarefas repetitivas ou iterativas, e podem poupar muito tempo e código. Cada iteração pode variar nas suas variáveis, valores e condições. Existem diferentes tipos de ciclos em JavaScript, e todos têm pequenas diferenças, mas essencialmente fazem a mesma coisa: iterar sobre dados.

Ciclo For

O ciclo for requer 3 partes para iterar:

• counter Uma variável que é tipicamente inicializada com um número que conta o número de iterações
• condition Expressão que utiliza operadores de comparação para fazer o ciclo parar quando for false
• iteration-expression Executa no final de cada iteração, tipicamente usado para alterar o valor do contador

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Executa este código no console do navegador. O que acontece quando fazes pequenas alterações ao contador, condição ou expressão de iteração? Consegues fazê-lo correr ao contrário, criando uma contagem decrescente?

Ciclo While

Ao contrário da sintaxe do ciclo for, os ciclos while apenas requerem uma condição que fará o ciclo parar quando a condição se tornar false. As condições nos ciclos geralmente dependem de outros valores como contadores, e devem ser geridas durante o ciclo. Os valores iniciais para os contadores devem ser criados fora do ciclo, e quaisquer expressões para cumprir uma condição, incluindo alterar o contador, devem ser mantidas dentro do ciclo.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Por que escolherias um ciclo for em vez de um ciclo while? 17 mil utilizadores tiveram a mesma pergunta no StackOverflow, e algumas das opiniões podem ser interessantes para ti.

Ciclos e Arrays

Os arrays são frequentemente usados com ciclos porque a maioria das condições requer o comprimento do array para parar o ciclo, e o índice também pode ser o valor do contador.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Experimenta iterar sobre um array da tua própria criação no console do navegador.

---

🚀 Desafio

Existem outras formas de iterar sobre arrays além dos ciclos for e while. Existem forEach, for-of, e map. Reescreve o teu ciclo de array utilizando uma destas técnicas.

Questionário Pós-Aula

Questionário pós-aula

Revisão e Autoestudo

Os arrays em JavaScript têm muitos métodos associados a eles, que são extremamente úteis para manipulação de dados. Lê sobre estes métodos e experimenta alguns deles (como push, pop, slice e splice) num array da tua criação.

Tarefa

Iterar um Array

---

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, é importante ter em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.