6.6 KiB
Noções básicas de JavaScript: Arrays e Laços
Nota de esboço por Tomomi Imura
Questionário de Pré-Palestra
Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporciona interactividade na web. Nesta lição, aprenderá sobre arrays e loops, que são usados para manipular dados.
🎥 Clique na imagem acima para um vídeo sobre arrays e loops.
Pode seguir esta lição em Microsoft Aprender!
Arrays
Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz.
✅ Os arrays estão à nossa volta! Consegue pensar num exemplo da vida real de uma matriz, tal como uma matriz de painéis solares?
A sintaxe de uma matriz é um par de colchetes.
let myArray = [];
Esta é uma matriz vazia, mas as matrizes podem ser declaradas já povoadas com dados. Os valores múltiplos numa matriz são separados por uma vírgula.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
Aos valores da matriz é atribuído um valor único chamado índice, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com colchetes para recuperar, alterar, ou inserir valores da array.
✅ Surpreende-o que as arrays comecem pelo índice zero? Em algumas linguagens de programação, os índices começam em 1. Há uma história interessante em torno disto, que pode ler na Wikipedia.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"
Pode aproveitar o índice para alterar um valor, como este:
iceCreamFlavors[4] = "Butter Pecan"; //Mudou "Rocky Road" para "Butter Pecan".
E pode inserir um novo valor a um determinado índice como este:
iceCreamFlavors[5] = "Cookie Dough"; //Acrescentada "Cookie Dough".
✅ Uma forma mais comum de empurrar valores para uma matriz é através da utilização de operadores de matriz como array.push()
Para descobrir quantos itens estão numa matriz, utilize a propriedade comprimento.
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5
✅ Experimente você mesmo! Use a consola do seu navegador para criar e manipular uma série da sua própria criação.
Laços
Os laços permitem 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 loops em JavaScript, e têm pequenas diferenças, mas essencialmente fazem a mesma coisa: loop over data.
Para Laço
O laço para requer 3 partes para iterar:
- Contador Uma variável que é tipicamente inicializada com um número que conta o número de iterações.
- condição Expressão que utiliza operadores de comparação para fazer parar o laço quando verdadeiro
- expressão de iteração Funciona no final de cada iteração, normalmente utilizada para alterar o valor do contador
// Contagem até 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
✅Executar este código numa consola de navegação. O que acontece quando se fazem pequenas alterações ao contador, condição, ou expressão de iteração? Pode fazê-lo correr para trás, criando uma contagem decrescente?
While loop
Ao contrário da sintaxe para o laço para, entretanto só requer uma condição que irá parar o laço quando verdadeiro. As condições em loops geralmente dependem de outros valores como contadores, e devem ser geridas durante o loop. Os valores iniciais dos contadores devem ser criados fora do laço, e quaisquer expressões para satisfazer uma condição, incluindo a mudança do contador, devem ser mantidas dentro do laço.
//Contagem até 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
✅ Porque escolheria um para loop vs. um loop de tempo? Os 17K espectadores tinham a mesma pergunta sobre o StackOverflow, e algumas das opiniões pode ser interessante para você.
Laços e Arrays
As arrays são frequentemente utilizadas 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]);
} //Termina quando todos os sabores são impressos
✅ Experimente fazer looping sobre um conjunto da sua própria marca na consola do seu navegador.
🚀 Desafio
Existem outras formas de looping sobre arrays que não são para e enquanto se faz loops. Existem forEach, for-of, and map. Reescreva o seu laço de matriz usando uma destas técnicas.
Questionário de pós-publicidade
Questionário de pós-publicidade
Revisão e Auto-estudo
As arrays em JavaScript têm muitos métodos ligados a elas, extremamente úteis para a manipulação de dados. Leia mais sobre estes métodos e experimente algumas delas (como empurrar, estalar, cortar e emendar) numa variedade da sua criação.