{"id":2122,"date":"2026-07-03T11:29:08","date_gmt":"2026-07-03T14:29:08","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2122"},"modified":"2026-07-03T11:49:59","modified_gmt":"2026-07-03T14:49:59","slug":"aprenda-vetores-em-javascript-resolvendo-exercicios-passo-a-passo","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2122","title":{"rendered":"Vetores em JavaScript na Pr\u00e1tica | Exerc\u00edcios Passo a Passo"},"content":{"rendered":"\n

Como um sistema consegue armazenar centenas de produtos, milhares de clientes ou uma lista inteira de mensagens sem criar uma vari\u00e1vel para cada informa\u00e7\u00e3o?<\/p>\n\n\n\n

A resposta est\u00e1 nos vetores<\/strong> (arrays).<\/p>\n\n\n\n

Sempre que voc\u00ea v\u00ea uma lista de produtos em um e-commerce, coment\u00e1rios em uma rede social ou resultados de uma pesquisa, existe uma grande chance de que esses dados estejam sendo manipulados utilizando vetores.<\/p>\n\n\n\n

Neste artigo voc\u00ea aprender\u00e1 como os vetores funcionam na pr\u00e1tica resolvendo exerc\u00edcios passo a passo com JavaScript, entendendo n\u00e3o apenas a sintaxe, mas principalmente a l\u00f3gica utilizada pelas aplica\u00e7\u00f5es reais.<\/p>\n\n\n\n

\n\n\n\n

O que \u00e9 um vetor?<\/h1>\n\n\n\n

Um vetor (Array) \u00e9 uma estrutura capaz de armazenar v\u00e1rios valores dentro de uma \u00fanica vari\u00e1vel.<\/p>\n\n\n\n

Por exemplo:<\/p>\n\n\n\n

const numeros = [8, 15, 22, 5, 31];\n<\/code><\/pre>\n\n\n\n
Em vez de criar cinco vari\u00e1veis diferentes, armazenamos todos os n\u00fameros em uma \u00fanica estrutura.<\/p>\n\n\n\n
\u00c9 exatamente isso que torna os vetores t\u00e3o importantes no desenvolvimento de software.<\/p>\n\n\n\n
\n\n\n\n
Como os dados s\u00e3o organizados?<\/h1>\n\n\n\n
Cada elemento possui uma posi\u00e7\u00e3o chamada \u00edndice<\/strong>.<\/p>\n\n\n\n
O detalhe importante \u00e9 que os \u00edndices sempre come\u00e7am em 0<\/strong>.<\/p>\n\n\n\n
\u00cdndice\n\n0   1   2   3   4\n\n\u2193\n\n[8, 15, 22, 5, 31]\n<\/code><\/pre>\n\n\n\n
Isso significa que:<\/p>\n\n\n\n
    \n
  • \u00edndice 0 \u2192 primeiro elemento;<\/li>\n\n\n\n
  • \u00edndice 1 \u2192 segundo elemento;<\/li>\n\n\n\n
  • \u00edndice 2 \u2192 terceiro elemento.<\/li>\n<\/ul>\n\n\n\n
    Esse conceito aparece praticamente em qualquer linguagem de programa\u00e7\u00e3o.<\/p>\n\n\n\n
    \n\n\n\n
    Descobrindo o tamanho do vetor<\/h1>\n\n\n\n
    Para saber quantos elementos existem utilizamos a propriedade length<\/strong>.<\/p>\n\n\n\n
    console.log(numeros.length);\n<\/code><\/pre>\n\n\n\n
    Ela retorna a quantidade total de posi\u00e7\u00f5es ocupadas.<\/p>\n\n\n\n
    Essa informa\u00e7\u00e3o \u00e9 extremamente utilizada durante la\u00e7os de repeti\u00e7\u00e3o.<\/p>\n\n\n\n
    \n\n\n\n
    Primeiro e \u00faltimo elemento<\/h1>\n\n\n\n
    Uma d\u00favida muito comum entre iniciantes \u00e9 descobrir como acessar o primeiro e o \u00faltimo valor do vetor.<\/p>\n\n\n\n
    O primeiro elemento sempre est\u00e1 no \u00edndice zero.<\/p>\n\n\n\n
    J\u00e1 o \u00faltimo pode ser encontrado utilizando:<\/p>\n\n\n\n
    numeros[numeros.length - 1]\n<\/code><\/pre>\n\n\n\n
    Essa t\u00e9cnica \u00e9 utilizada constantemente em sistemas reais.<\/p>\n\n\n\n
    \n\n\n\n
    Percorrendo todos os elementos com o for<\/h1>\n\n\n\n
    Uma das maiores vantagens dos vetores \u00e9 permitir percorrer automaticamente todos os seus elementos.<\/p>\n\n\n\n
    Para isso utilizamos o la\u00e7o for<\/strong>.<\/p>\n\n\n\n
    for (let i = 0; i < numeros.length; i++) {\n\n}\n<\/code><\/pre>\n\n\n\n
    A vari\u00e1vel i<\/strong> representa o \u00edndice atual.<\/p>\n\n\n\n
    Dessa forma conseguimos acessar qualquer posi\u00e7\u00e3o do vetor.<\/p>\n\n\n\n
    \u00c9 assim que diversos sistemas processam listas completas de informa\u00e7\u00f5es.<\/p>\n\n\n\n
    \n\n\n\n
    Filtrando valores<\/h1>\n\n\n\n
    Imagine que voc\u00ea precise mostrar apenas produtos acima de determinado pre\u00e7o.<\/p>\n\n\n\n
    Ou apenas alunos aprovados.<\/p>\n\n\n\n
    Ou clientes com idade superior a 18 anos.<\/p>\n\n\n\n
    Tudo isso funciona percorrendo o vetor e aplicando uma condi\u00e7\u00e3o.<\/p>\n\n\n\n
    Durante o projeto fazemos exatamente esse exerc\u00edcio filtrando apenas os n\u00fameros maiores que 10.<\/p>\n\n\n\n
    Esse tipo de l\u00f3gica aparece diariamente no desenvolvimento de software.<\/p>\n\n\n\n
    \n\n\n\n
    Somando todos os elementos<\/h1>\n\n\n\n
    Outro exerc\u00edcio cl\u00e1ssico consiste em calcular a soma de todos os valores armazenados.<\/p>\n\n\n\n
    Criamos uma vari\u00e1vel acumuladora.<\/p>\n\n\n\n
    Depois percorremos o vetor adicionando cada elemento ao total.<\/p>\n\n\n\n
    Esse mesmo conceito \u00e9 utilizado em sistemas financeiros, relat\u00f3rios, dashboards e c\u00e1lculos estat\u00edsticos.<\/p>\n\n\n\n
    \n\n\n\n
    Encontrando o maior valor sem utilizar Math.max()<\/h1>\n\n\n\n
    Um dos exerc\u00edcios mais importantes para fortalecer a l\u00f3gica consiste em descobrir qual \u00e9 o maior n\u00famero presente no vetor.<\/p>\n\n\n\n
    Ao inv\u00e9s de utilizar fun\u00e7\u00f5es prontas, implementamos toda a l\u00f3gica manualmente.<\/p>\n\n\n\n
    O algoritmo funciona assim:<\/p>\n\n\n\n
      \n
    1. Guarda o primeiro elemento como maior valor.<\/li>\n\n\n\n
    2. Percorre todo o vetor.<\/li>\n\n\n\n
    3. Sempre que encontra um n\u00famero maior, atualiza a vari\u00e1vel.<\/li>\n\n\n\n
    4. Ao final, teremos o maior elemento da lista.<\/li>\n<\/ol>\n\n\n\n
      Esse exerc\u00edcio desenvolve muito o racioc\u00ednio l\u00f3gico.<\/p>\n\n\n\n
      \n\n\n\n
      Inserindo novos elementos com push()<\/h1>\n\n\n\n
      Os vetores tamb\u00e9m permitem crescer dinamicamente.<\/p>\n\n\n\n
      Utilizando push()<\/strong>, adicionamos um novo elemento ao final da lista.<\/p>\n\n\n\n
      numeros.push(40);\n<\/code><\/pre>\n\n\n\n
      Essa opera\u00e7\u00e3o \u00e9 utilizada constantemente quando um usu\u00e1rio realiza um cadastro ou adiciona novos itens em um sistema.<\/p>\n\n\n\n
      \n\n\n\n
      Removendo elementos com pop()<\/h1>\n\n\n\n
      Tamb\u00e9m podemos remover o \u00faltimo elemento utilizando pop()<\/strong>.<\/p>\n\n\n\n
      numeros.pop();\n<\/code><\/pre>\n\n\n\n
      Esse m\u00e9todo \u00e9 bastante utilizado em opera\u00e7\u00f5es como desfazer a\u00e7\u00f5es, remover itens de carrinhos ou controlar pilhas de dados.<\/p>\n\n\n\n
      \n\n\n\n
      Onde os vetores aparecem no mundo real?<\/h1>\n\n\n\n
      Mesmo sem perceber, voc\u00ea utiliza vetores diariamente.<\/p>\n\n\n\n
      Por exemplo:<\/p>\n\n\n\n
        \n
      • lista de produtos;<\/li>\n\n\n\n
      • coment\u00e1rios de v\u00eddeos;<\/li>\n\n\n\n
      • mensagens do WhatsApp;<\/li>\n\n\n\n
      • resultados do Google;<\/li>\n\n\n\n
      • lista de usu\u00e1rios;<\/li>\n\n\n\n
      • pedidos de uma loja;<\/li>\n\n\n\n
      • carrinho de compras;<\/li>\n\n\n\n
      • cat\u00e1logo de filmes;<\/li>\n\n\n\n
      • playlists de m\u00fasica.<\/li>\n<\/ul>\n\n\n\n
        Sempre que existe uma cole\u00e7\u00e3o de informa\u00e7\u00f5es, normalmente existe um vetor por tr\u00e1s daquela funcionalidade.<\/p>\n\n\n\n
        \n\n\n\n
        O que voc\u00ea aprender\u00e1 neste projeto?<\/h1>\n\n\n\n
        Durante a resolu\u00e7\u00e3o dos exerc\u00edcios voc\u00ea aprender\u00e1:<\/p>\n\n\n\n
          \n
        • \u00edndices;<\/li>\n\n\n\n
        • propriedade length<\/strong>;<\/li>\n\n\n\n
        • primeiro e \u00faltimo elemento;<\/li>\n\n\n\n
        • la\u00e7o for<\/strong>;<\/li>\n\n\n\n
        • filtragem de dados;<\/li>\n\n\n\n
        • soma dos elementos;<\/li>\n\n\n\n
        • encontrar o maior valor sem utilizar Math.max()<\/strong>;<\/li>\n\n\n\n
        • manipula\u00e7\u00e3o utilizando push()<\/strong> e pop()<\/strong>.<\/li>\n<\/ul>\n\n\n\n
          Mais importante do que decorar comandos, voc\u00ea entender\u00e1 a l\u00f3gica utilizada para resolver problemas reais.<\/p>\n\n\n\n
          \n\n\n\n
          Assista ao projeto completo<\/h1>\n\n\n\n
          Se voc\u00ea prefere aprender acompanhando cada exerc\u00edcio sendo resolvido passo a passo, preparei um v\u00eddeo mostrando toda a constru\u00e7\u00e3o da l\u00f3gica de forma pr\u00e1tica e sem complica\u00e7\u00e3o.<\/p>\n\n\n\n
          Durante a aula resolvemos diversos desafios comuns para quem est\u00e1 iniciando em JavaScript, explicando cada linha de c\u00f3digo e mostrando como pensar durante a resolu\u00e7\u00e3o dos problemas.<\/p>\n\n\n\n
          \ud83c\udfa5 V\u00eddeo editado (recomendado)<\/h2>\n\n\n\n
          Aprenda Vetores em JavaScript Resolvendo Exerc\u00edcios Passo a Passo<\/strong><\/p>\n\n\n\n
          \n