Pular para o conteúdoPedro Farbo
Lição 13 / 1645 min

Listas e Objetos

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);// 15

Objetos

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"); // false

Objetos 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);// 85

Desestruturaçã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); // 25

Em 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, reduce para transformar
  • ✅ Objetos: pares chave-valor
  • this referencia 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! 🚀

Gostou do conteúdo? Sua contribuição ajuda a manter tudo online e gratuito!

PIX:0737160d-e98f-4a65-8392-5dba70e7ff3e