Fundamentos de Arrays em JavaScript
Um array é como uma fileira de gavetas numeradas — cada gaveta tem um número (índice) e guarda algo (dados). Você pode pegar itens pelo número, trocá-los ou adicionar novos no final. Arrays são a estrutura de dados que você mais usará no desenvolvimento do dia a dia.
O Que É um Array
Um array é uma coleção ordenada de valores que pode armazenar qualquer tipo de dado:
<script>
let arr = [1, 'olá', true, null, undefined];
</script>
Um único array pode misturar diferentes tipos, mas na prática você geralmente armazenará o mesmo tipo para facilitar o processamento.
Criando Arrays
Duas maneiras:
<script>
// Método 1: Sintaxe literal (recomendado — limpo e direto)
let fruits = ['Maçã', 'Banana', 'Laranja'];
// Método 2: Construtor Array
let nums = new Array(1, 2, 3);
let empty = new Array(5); // Cria um array vazio de comprimento 5, NÃO [5]!
</script>
new Array(5) cria um array vazio com comprimento 5, não um array contendo o número 5! Isso engana muitas pessoas, então fique com o literal [].
Acessando Elementos
Índices de array começam em 0, não em 1. O primeiro elemento é [0], o segundo é [1], e assim por diante:
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
fruits[0]; // 'Maçã'
fruits[1]; // 'Banana'
fruits[2]; // 'Laranja'
</script>
Acessar um índice inexistente não lança um erro — retorna undefined:
<script>
fruits[5]; // undefined
</script>
Propriedade length
length retorna o número de elementos no array:
<script>
let arr = [10, 20, 30];
arr.length; // 3
</script>
length é sempre um a mais que o maior índice (já que índices começam em 0). O último elemento está em arr.length - 1.
Modificando Elementos
Basta atribuir um novo valor via índice:
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
fruits[1] = 'Uva'; // Substitui 'Banana' por 'Uva'
// ['Maçã', 'Uva', 'Laranja']
</script>
Você também pode adicionar elementos por índice (não recomendado — cria slots vazios):
<script>
fruits[5] = 'Melancia';
// ['Maçã', 'Uva', 'Laranja', empty × 2, 'Melancia']
</script>
Exemplo: Operações Básicas com Arrays
<!DOCTYPE html>
<html lang="pt-br">
<body>
<h2>Operações Básicas com Arrays</h2>
<div id="output"></div>
<script>
let fruits = ['Maçã', 'Banana', 'Laranja', 'Uva', 'Melancia'];
let html = '<strong>Array original:</strong>' + fruits.join(', ') + '<br>';
html += '<strong>Comprimento:</strong>' + fruits.length + '<br>';
html += '<strong>Primeiro:</strong>' + fruits[0] + '<br>';
html += '<strong>Último:</strong>' + fruits[fruits.length - 1] + '<br><br>';
fruits[1] = 'Manga';
html += '<strong>Após modificar índice 1:</strong>' + fruits.join(', ') + '<br>';
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
Métodos Principais
Os métodos de array mais usados para adicionar e remover elementos:
| Método | Ação | Retorna |
|---|---|---|
push() |
Adicionar no final | Novo comprimento |
pop() |
Remover do final | Elemento removido |
unshift() |
Adicionar no início | Novo comprimento |
shift() |
Remover do início | Elemento removido |
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>Métodos de Array</title></head>
<body>
<pre id="output"></pre>
<script>
let arr = ['a', 'b', 'c'];
arr.push('d'); // ['a','b','c','d'] retorna 4
arr.pop(); // ['a','b','c'] retorna 'd'
arr.unshift('z'); // ['z','a','b','c'] retorna 4
arr.shift(); // ['a','b','c'] retorna 'z'
document.getElementById('output').textContent = JSON.stringify(arr);
</script>
</body>
</html>
push/pop trabalham na cauda; unshift/shift trabalham na cabeça. Métodos que começam com p afetam o final; aqueles que começam com s afetam o início. Métodos com prefixo un adicionam; sem un removem.
Exemplo: Gerenciador de Lista de Frutas
<!DOCTYPE html>
<html lang="pt-br">
<body>
<h2>Gerenciador de Lista de Frutas</h2>
<input type="text" id="fruitInput" placeholder="Digite o nome de uma fruta">
<button onclick="addFruit()">Adicionar no final</button>
<button onclick="removeLast()">Remover último</button>
<p id="output"></p>
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
function showFruits() {
let html = '<strong>Lista de frutas atual:</strong><br>';
if (fruits.length === 0) {
html += '(lista vazia)';
} else {
for (let i = 0; i < fruits.length; i++) {
html += `[${i}] ${fruits[i]}<br>`;
}
}
html += `<br>Total: ${fruits.length} frutas`;
document.getElementById('output').innerHTML = html;
}
function addFruit() {
let name = document.getElementById('fruitInput').value.trim();
if (name) {
fruits.push(name);
document.getElementById('fruitInput').value = '';
showFruits();
}
}
function removeLast() {
if (fruits.length > 0) {
let removed = fruits.pop();
showFruits();
}
}
showFruits();
</script>
</body>
</html>
Verificando Arrays: Array.isArray() vs typeof
typeof retorna "object" para arrays, o que o torna inútil para distinguir arrays de objetos simples:
<script>
let arr = [1, 2, 3];
typeof arr; // "object" ← inútil!
Array.isArray(arr); // true ← abordagem correta
</script>
typeof é não confiável para arrays — sempre use Array.isArray().
forEach para Iteração
forEach é a maneira mais comum de iterar sobre arrays — mais declarativo que um loop for:
<!DOCTYPE html>
<html lang="pt-br">
<head><meta charset="UTF-8"><title>forEach</title></head>
<body>
<pre id="output"></pre>
<script>
let fruits = ['Maçã', 'Banana', 'Laranja'];
let result = '';
fruits.forEach(function(fruit, index) {
result += index + ' ' + fruit + '\n';
});
document.getElementById('output').textContent = result;
</script>
</body>
</html>
Arrow functions tornam ainda mais conciso:
<script>
fruits.forEach((fruit, index) => {
console.log(index, fruit);
});
</script>
Exemplo: forEach em Ação
<!DOCTYPE html>
<html lang="pt-br">
<body>
<h2>Iteração de Array com forEach</h2>
<div id="output"></div>
<script>
let students = [
{ name: 'Alice', score: 92 },
{ name: 'Bob', score: 85 },
{ name: 'Charlie', score: 78 },
{ name: 'Diana', score: 96 }
];
let html = '<table border="1" cellpadding="8" style="border-collapse:collapse">';
html += '<tr><th>#</th><th>Nome</th><th>Nota</th><th>Conceito</th></tr>';
students.forEach((s, i) => {
let grade = s.score >= 90 ? 'A' : s.score >= 80 ? 'B' : 'C';
let color = s.score >= 90 ? 'green' : s.score >= 80 ? 'blue' : 'orange';
html += `<tr>
<td>${i + 1}</td>
<td>${s.name}</td>
<td>${s.score}</td>
<td style="color:${color}">${grade}</td>
</tr>`;
});
html += '</table>';
let total = 0;
students.forEach(s => total += s.score);
html += `<p>Média: ${(total / students.length).toFixed(1)}</p>`;
document.getElementById('output').innerHTML = html;
</script>
</body>
</html>
map, filter e reduce são ainda mais poderosos — cobertos na próxima lição.
📖 Resumo
- Crie arrays com o literal
[]— evitenew Array()(fácil de confundir) - Índices começam em 0; o último elemento está no índice
length - 1 push/poptrabalham na cauda;unshift/shifttrabalham na cabeça- Use
Array.isArray()para verificar se algo é um array —typeofretorna"object"e não é confiável forEaché mais declarativo quefor, mas você não pode usarbreakpara sair antecipadamente
❓ Perguntas Frequentes
P：O que
pusheunshiftretornam? R：Ambos retornam o novo comprimento do array, não o array modificado. Muitas pessoas esperam o próprio array —let arr = [1].push(2)dá2(o comprimento), não[1, 2].
P：Posso usar
breakdentro doforEach? R：Não.forEachnão tem mecanismo debreak. Para sair antecipadamente, use um loopfortradicional oufor...ofcombreak.
P：Acessar um índice fora dos limites lança um erro? R：Não.
arr[100]retornaundefinedquando fora dos limites — nenhuma exceção é lançada. Mas isso pode esconder bugs, então é boa prática verificar o intervalo de índices antes de acessar.
📝 Atividades
- Crie um array com 5 nomes de cidades e use
forEachpara exibir o número e nome de cada cidade na página - Construa uma lista de tarefas: insira tarefas para adicionar no final, clique em "Concluído" para remover a última tarefa e exiba a lista em tempo real
- Escreva um programa que recebe 5 números como entrada, armazena em um array e exibe sua soma e média