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

Fundamentos de JavaScript: Arrays e Loops

Sketchnote por Tomomi Imura

Questionário Pré-Aula

Questionário pré-aula

Esta lição aborda os fundamentos do JavaScript, a linguagem que traz interatividade para a web. Nesta lição, você aprenderá sobre arrays e loops, que são usados para manipular dados.

🎥 Clique nas imagens acima para assistir aos vídeos sobre arrays e loops.

Você pode acessar esta lição no Microsoft Learn!

Arrays

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

✅ Arrays estão por toda parte! Consegue pensar em um 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 arrays podem ser declarados já preenchidos com dados. Vários valores em um array são separados por vírgulas.

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

Os valores do array recebem um valor único chamado índice, um número inteiro atribuído com base na sua posição a partir do início do array. No exemplo acima, o valor de string "Chocolate" tem o índice 0, e o índice de "Rocky Road" é 4. Use o índice com colchetes para recuperar, alterar ou inserir valores no array.

✅ Você se surpreendeu ao saber 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 isso, que você pode ler na Wikipedia.

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

Você pode usar o índice para alterar um valor, assim:

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

E pode inserir um novo valor em um índice específico assim:

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

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

Para descobrir quantos itens há em um array, use a propriedade length.

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

✅ Experimente você mesmo! Use o console do seu navegador para criar e manipular um array de sua própria criação.

Loops

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

For Loop

O loop for requer 3 partes para iterar:

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

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

✅ Execute este código no console do navegador. O que acontece quando você faz pequenas alterações no contador, na condição ou na expressão de iteração? Consegue fazer o loop rodar ao contrário, criando uma contagem regressiva?

While Loop

Diferente da sintaxe do loop for, os loops while exigem apenas uma condição que fará o loop parar quando a condição se tornar false. As condições nos loops geralmente dependem de outros valores, como contadores, e devem ser gerenciadas durante o loop. Os valores iniciais dos contadores devem ser criados fora do loop, e quaisquer expressões para atender a uma condição, incluindo a alteração do contador, devem ser mantidas dentro do loop.

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

✅ Por que você escolheria um loop for em vez de um while? 17 mil pessoas tiveram a mesma dúvida no StackOverflow, e algumas das opiniões podem ser interessantes para você.

Loops e Arrays

Arrays são frequentemente usados com loops porque a maioria das condições requer o comprimento do array para parar o loop, 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

✅ Experimente iterar sobre um array de sua própria criação no console do navegador.

---

🚀 Desafio

Existem outras maneiras de iterar sobre arrays além dos loops for e while. Há forEach, for-of e map. Reescreva seu loop de array usando uma dessas técnicas.

Questionário Pós-Aula

Questionário pós-aula

Revisão e Autoestudo

Os arrays em JavaScript possuem muitos métodos associados a eles, que são extremamente úteis para manipulação de dados. Leia sobre esses métodos e experimente alguns deles (como push, pop, slice e splice) em um array de sua 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, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. 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 equivocadas decorrentes do uso desta tradução.