Arrays em JavaScript
A página anterior guardou os fatos num texto que dá para enviar depois. Aqui a lista continua viva dentro do script, e você pode reescrever os espaços. Três nomes de cor ficam em ordem. Você aponta para um espaço pelo número, não por uma chave.
Uma prateleira, não um bilhete
Os colchetes montam a lista enquanto o script roda, e cada valor senta num espaço numerado. Isto não é texto JSON à espera de parse, nem um objeto com campos nomeados. O sentido desta forma está na ordem dos espaços.
Nome contra número
📊 Objeto nomeado contra array numerado
| Pergunta | Objeto | Array |
|---|---|---|
| Como você aponta | uma chave como name | um índice como 0 |
| Primeira cor | não é uma lista de cores | colors[0] |
| Quantos | você conta as chaves | length |
| Ordem | não é o ponto | é o ponto |
| Depois da página de JSON | um bilhete sobre dados | uma lista viva no script |
Um objeto pergunta qual nome você quer, um array pergunta qual lugar você quer. A primeira cor é colors[0], sem chave. Colocar um objeto dentro de um espaço é um hábito para depois, não desta página.
Colchetes, não chaves
As chaves abrem um objeto e os colchetes abrem um array. Três nomes de cor são três espaços em sequência. A caneca da lição anterior era um campo com nome, não uma lista. Quando você só quer uma lista, fique com os colchetes.
let colors = ["red", "green", "blue"];
console.log(colors[0]);
O primeiro espaço é o índice 0
colors[0] imprime red. A contagem começa no zero, não no um. Se você começa no um, perde o vermelho. O segundo espaço é green e o terceiro é blue.
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);
length conta os espaços
colors.length vale 3 porque três nomes estão guardados, e o último espaço colors[colors.length - 1] é blue. Você tira um porque o primeiro índice é zero, não um. length é uma propriedade e não leva parênteses de chamada.
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
Trocar não muda a quantidade
colors[1] = "gold" escreve por cima de green. A leitura seguinte desse espaço imprime gold. length continua 3. Um espaço que já existia mudou, nenhum espaço novo entrou. Acrescentar e tirar espaços é a lição dos métodos de array.
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
Um índice vazio não é um espaço novo
colors[9] não guarda nada, então a leitura é undefined e length continua 3. Ler um espaço vazio não alonga a lista. Escrever além do fim aumenta o comprimento e deixa buracos, e não é a ferramenta desta página.
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
Um só tipo de valor lê melhor
Um espaço pode guardar um texto, um número ou um boolean. bag[1] imprime 12 e typeof bag[0] é string. Uma lista de cores é mais clara que uma sacola mista. A linguagem não proíbe a mistura.
Mostre a primeira cor na página
Leia o índice 0 e escreva esse texto no parágrafo. As outras duas cores ficam na lista.
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>
O parágrafo mostra red. Troque só o primeiro texto dentro dos colchetes e atualize, e a linha acompanha. As outras duas cores continuam guardadas e não vão para o parágrafo.
Passos de prática
- Crie as três cores e leia o índice 0, depois leia o comprimento e chegue à última cor com o comprimento menos um.
- Ponha o índice 1 em
golde leia esse espaço e o comprimento. - Leia o índice 9 e confirme que o comprimento ainda é 3, e na sacola mista veja o número e o tipo do primeiro espaço.
- Na demo HTML, troque só a primeira cor, atualize e leia o parágrafo.
Escorregões comuns
- Contar a partir de 1 e pular a primeira cor, e chamar
lengthcom parênteses como se fosse uma função - Tratar o array como texto
JSONe passá-lo aparse - Esperar que só ler um índice vazio faça
lengthcrescer, ou que trocar um espaço signifique acrescentar um item - Procurar métodos de array nesta página
Resumo
- Um array é uma lista viva dentro do script, e os colchetes a criam
- O índice 0 é o primeiro item
lengthconta espaços e não leva parênteses- Escrever num índice que já existe troca esse espaço, e ler além do fim é
undefinedsem mudar o comprimento - O primeiro item pode preencher uma linha da página, e a seguir vêm os métodos de array para acrescentar e tirar
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo