Listas e Objetos
Arrays e objetos são estruturas fundamentais para organizar dados. Vamos dominá-los!
Arrays (Listas)
Array é uma lista ordenada de valores:
javascript
const frutas = ["maçã", "banana", "laranja"];const numeros = [1, 2, 3, 4, 5];const misturado = ["texto", 42, true, null];Acessando elementos
Índices começam em 0!
javascript
const frutas = ["maçã", "banana", "laranja"]; console.log(frutas[0]); // "maçã"console.log(frutas[1]); // "banana"console.log(frutas[2]); // "laranja"console.log(frutas[3]); // undefined (não existe) // Último elementoconsole.log(frutas[frutas.length - 1]); // "laranja"Modificando arrays
javascript
const frutas = ["maçã", "banana"]; // Adicionar no finalfrutas.push("laranja"); // ["maçã", "banana", "laranja"] // Remover do finalfrutas.pop(); // ["maçã", "banana"] // Adicionar no iníciofrutas.unshift("uva"); // ["uva", "maçã", "banana"] // Remover do iníciofrutas.shift(); // ["maçã", "banana"] // Alterar elemento específicofrutas[0] = "morango"; // ["morango", "banana"]Métodos úteis de array
javascript
const numeros = [3, 1, 4, 1, 5, 9, 2, 6]; // Tamanhonumeros.length; // 8 // Encontrarnumeros.includes(5); // truenumeros.indexOf(4); // 2 (posição) // Ordenarnumeros.sort((a, b) => a - b); // [1, 1, 2, 3, 4, 5, 6, 9] // Inverternumeros.reverse(); // [9, 6, 5, 4, 3, 2, 1, 1] // Fatiarnumeros.slice(0, 3); // primeiros 3 elementos // Juntar em string["a", "b", "c"].join("-"); // "a-b-c"Métodos de iteração
javascript
const numeros = [1, 2, 3, 4, 5]; // forEach - executar para cada itemnumeros.forEach(num => { console.log(num * 2);}); // map - transformar e criar novo arrayconst dobrados = numeros.map(num => num * 2);// [2, 4, 6, 8, 10] // filter - filtrar itemsconst maioresQue2 = numeros.filter(num => num > 2);// [3, 4, 5] // find - encontrar primeiro que satisfaz condiçãoconst encontrado = numeros.find(num => num > 3);// 4 // reduce - reduzir a um valorconst soma = numeros.reduce((acc, num) => acc + num, 0);// 15Objetos
Objetos armazenam dados em pares chave-valor:
javascript
const pessoa = { nome: "João", idade: 25, cidade: "São Paulo", ativo: true};Acessando propriedades
javascript
// Notação de pontoconsole.log(pessoa.nome); // "João"console.log(pessoa.idade); // 25 // Notação de colchetesconsole.log(pessoa["nome"]); // "João" // Útil com variáveisconst prop = "cidade";console.log(pessoa[prop]); // "São Paulo"Modificando objetos
javascript
const pessoa = { nome: "João", idade: 25 }; // Modificarpessoa.idade = 26; // Adicionarpessoa.email = "joao@email.com"; // Removerdelete pessoa.email;Métodos de objeto
javascript
const pessoa = { nome: "João", idade: 25 }; // ChavesObject.keys(pessoa); // ["nome", "idade"] // ValoresObject.values(pessoa); // ["João", 25] // EntradasObject.entries(pessoa); // [["nome", "João"], ["idade", 25]] // Verificar se existe"nome" in pessoa; // truepessoa.hasOwnProperty("email"); // falseObjetos com métodos
Objetos podem ter funções:
javascript
const pessoa = { nome: "João", idade: 25, apresentar() { return `Olá, meu nome é ${this.nome}!`; }, fazerAniversario() { this.idade++; return `Agora tenho ${this.idade} anos!`; }}; console.log(pessoa.apresentar()); // "Olá, meu nome é João!"console.log(pessoa.fazerAniversario()); // "Agora tenho 26 anos!"this se refere ao próprio objeto.
Arrays de objetos
Super comum na prática:
javascript
const usuarios = [ { id: 1, nome: "Ana", idade: 28 }, { id: 2, nome: "Bruno", idade: 35 }, { id: 3, nome: "Carla", idade: 22 }]; // Encontrar por idconst usuario = usuarios.find(u => u.id === 2);// { id: 2, nome: "Bruno", idade: 35 } // Filtrar por idadeconst adultos = usuarios.filter(u => u.idade >= 25);// [{ id: 1, nome: "Ana"... }, { id: 2, nome: "Bruno"... }] // Extrair apenas nomesconst nomes = usuarios.map(u => u.nome);// ["Ana", "Bruno", "Carla"] // Somar idadesconst somaIdades = usuarios.reduce((acc, u) => acc + u.idade, 0);// 85Desestruturação
Extrair valores de forma elegante:
Arrays
javascript
const cores = ["vermelho", "verde", "azul"]; const [primeira, segunda, terceira] = cores;console.log(primeira); // "vermelho"console.log(segunda); // "verde"Objetos
javascript
const pessoa = { nome: "João", idade: 25, cidade: "SP" }; const { nome, idade } = pessoa;console.log(nome); // "João"console.log(idade); // 25Em parâmetros de função
javascript
function exibirPessoa({ nome, idade }) { console.log(`${nome} tem ${idade} anos`);} exibirPessoa({ nome: "Ana", idade: 30 });Spread operator (...)
Copiar arrays
javascript
const original = [1, 2, 3];const copia = [...original];Juntar arrays
javascript
const a = [1, 2];const b = [3, 4];const junto = [...a, ...b]; // [1, 2, 3, 4]Copiar objetos
javascript
const original = { a: 1, b: 2 };const copia = { ...original };const modificado = { ...original, b: 10, c: 3 };// { a: 1, b: 10, c: 3 }Exercício: Lista de tarefas
javascript
const tarefas = [ { id: 1, titulo: "Estudar JS", concluida: true }, { id: 2, titulo: "Fazer exercícios", concluida: false }, { id: 3, titulo: "Criar projeto", concluida: false }]; // Adicionar tarefafunction adicionarTarefa(titulo) { const novaTarefa = { id: tarefas.length + 1, titulo, concluida: false }; tarefas.push(novaTarefa); return novaTarefa;} // Marcar como concluídafunction concluirTarefa(id) { const tarefa = tarefas.find(t => t.id === id); if (tarefa) { tarefa.concluida = true; return tarefa; } return null;} // Listar pendentesfunction listarPendentes() { return tarefas.filter(t => !t.concluida);} // TesteadicionarTarefa("Revisar código");concluirTarefa(2);console.log(listarPendentes());Resumo
- ✅ Arrays: listas ordenadas com índices
- ✅
map,filter,find,reducepara transformar - ✅ Objetos: pares chave-valor
- ✅
thisreferencia o próprio objeto - ✅ Desestruturação extrai valores elegantemente
- ✅ Spread
...copia e combina
Na próxima aula, vamos conectar JavaScript ao HTML com o DOM! 🚀