7.5 - Arrays

🧠 Arrays em JavaScript: Guardando várias infos em uma só caixinha!

Quando queremos guardar uma informação no JavaScript, usamos variáveis, né? Mas e quando queremos guardar várias informações de uma vez só? Tipo uma lista de filmes favoritos, nomes de amigos ou pontuações em um jogo?

Aí entra o Array! 🎉

📦 O que é um Array?

Um array (ou "vetor") é uma estrutura de dados que serve para armazenar vários valores em uma única variável. Esses valores podem ser números, textos (strings), objetos e até outros arrays!

let frutas = ["🍎 Maçã", "🍌 Banana", "🍇 Uva"];

No exemplo acima, frutas é um array que guarda três strings (textos) com nomes de frutas.

🔢 Como acessar os valores?

Cada item no array tem uma posição (ou índice) que começa do zero! Isso mesmo: o primeiro item está na posição 0, o segundo na posição 1, e assim por diante.

console.log(frutas[0]); // 🍎 Maçã
console.log(frutas[1]); // 🍌 Banana

🛠️ Como criar um Array?

Você pode criar um array de várias formas:

let numeros = [1, 2, 3, 4]; // Forma mais comum
let vazio = [];             // Um array vazio
let misturado = ["Olá", 42, true]; // Pode misturar tipos!

✍️ Como modificar um Array?

Você pode mudar um item específico do array assim:

frutas[1] = "🥝 Kiwi";
console.log(frutas); // ["🍎 Maçã", "🥝 Kiwi", "🍇 Uva"]

➕ Como adicionar ou remover itens?

Existem métodos super úteis pra isso:

Método

O que faz

push()

Adiciona no final 🏁

unshift()

Adiciona no começo 🏁

pop()

Remove do final ❌

shift()

Remove do começo ❌

Exemplos:

let games = ["Minecraft", "FIFA"];

// Adicionar no final
games.push("Fortnite"); 
// ["Minecraft", "FIFA", "Fortnite"]

// Remover do começo
games.shift(); 
// ["FIFA", "Fortnite"]

⚠️ Observação importante: Cuidado com o `delete`! 🧨

Você pode até remover um item de um array usando o delete, mas é importante entender o que realmente acontece antes de usar!

let frutas = ["maçã", "banana", "uva"];
delete frutas[1];

console.log(frutas); // ["maçã", empty, "uva"]
console.log(frutas.length); // 3 😬

😲 O que aconteceu aqui?

O delete remove o valor, mas não reorganiza o array e não diminui o tamanho. Ele deixa um buraco chamado "empty" no lugar, o que pode causar confusão em loops ou funções como map() e forEach().

🤓 Quando usar o `delete`?

O delete foi incluído no JavaScript desde o início da linguagem (1995) porque ele era útil para remover propriedades de objetos, que era o foco principal do JS no começo.

👉 No caso de arrays, raramente é recomendado usar delete.

Use delete só quando você precisa deixar o espaço vazio de propósito, por exemplo, para marcar uma posição como "vaga", "indisponível" ou "a ser preenchida".

✅ Alternativas mais seguras para remover itens

Método

Efeito

splice(i, 1)

Remove o item no índice i e reorganiza o array

filter()

Cria um novo array com os itens que você quer manter

let frutas = ["maçã", "banana", "uva"];
frutas.splice(1, 1); // ["maçã", "uva"]

let frutas = ["maçã", "banana", "uva"];
let semBanana = frutas.filter(fruta => fruta !== "banana");

⚠️ Cautelas ao usar `delete`

Evite usar em arrays, a menos que você saiba o que está fazendo.
Buracos (empty) no array podem gerar comportamento inesperado.
Métodos como forEach() pulam elementos vazios (isso pode causar bugs difíceis de achar).
Em estruturas de dados, é melhor reorganizar ou recriar o array sem o item.

💬 "O delete é como arrancar uma fruta da bandeja e deixar o espaço vazio. Parece limpo, mas pode atrapalhar na hora de contar ou servir." 🍇🍌🍏

📌 Resumo: Use splice() para remover com segurança. Use delete só em casos muito específicos.

🔍 Outros métodos úteis

length → mostra o tamanho do array (quantos itens ele tem)
includes() → verifica se um valor está no array
indexOf() → mostra a posição (índice) de um item
join() → junta todos os itens como uma string
forEach() → executa uma função para cada item

let notas = [10, 8, 7];

console.log(notas.length); // 3
console.log(notas.includes(10)); // true

notas.forEach(function(nota) {
  console.log("Nota:", nota);
});

🔄 Como percorrer um Array?

Pra fazer algo com cada item do array, usamos loops! Um dos mais comuns é o for.

let cores = ["azul", "verde", "vermelho"];

for (let i = 0; i < cores.length; i++) {
  console.log("Cor:", cores[i]);
}

📚 Resumo rápido

Um array é como uma lista de coisas.
Cada item tem uma posição (índice).
Podemos acessar, alterar, adicionar e remover os itens com métodos fáceis.
É uma ferramenta muito poderosa pra trabalhar com dados no JavaScript!

🚀 Desafio pra você!

Crie um array com os nomes de três amigos ou amigas. Depois, mostre o nome da segunda pessoa usando console.log.

🧑‍💻 Dica bônus: Arrays são a base pra várias coisas mais avançadas na programação, como jogos, apps, sites dinâmicos e muito mais. Quanto mais praticar, melhor!

Se quiser saber mais, dá uma olhada na documentação oficial do MDN sobre arrays . 👩‍🏫👨‍🏫

PreviousRespostas Next7.5.1 - Arrays

Last updated 3 months ago