JavaScript List: Trabalhando com listas (arrays) em JavaScript
Neste artigo, explicamos o conceito de listas em JavaScript, como criar e acessar os elementos de um array.
Publicado em 1 de agosto de 2023
Glossário
Conceito de listas em JavaScript
Listas são estruturas de dados fundamentais em programação, e em JavaScript não é diferente. No contexto da linguagem, uma lista é conhecida como array. Um array é uma coleção ordenada de elementos, em que cada elemento pode ser um valor de qualquer tipo de dado. Essa estrutura nos permite armazenar e acessar múltiplos valores de forma eficiente.
Declaração de uma lista em JavaScript
Em JavaScript, podemos declarar uma lista utilizando colchetes e separando os elementos por vírgulas. Por exemplo, podemos criar um array com os números de 1 a 5 da seguinte forma:
let listaNumeros = [1, 2, 3, 4, 5];Ao acessar os elementos de uma lista, utilizamos o seu índice. O índice de um array começa em 0, ou seja, o primeiro elemento tem índice 0, o segundo elemento tem índice 1, e assim por diante. Para acessar um elemento específico, usamos a sintaxe nomeDoArray[indice]. Por exemplo, para acessar o número 3 do array listaNumeros, utilizamos:
let elemento = listaNumeros[2]; // O valor de 'elemento' será 3Manipulação de listas em JavaScript
Uma característica importante das listas em JavaScript é que elas são mutáveis, ou seja, podemos adicionar, remover e modificar elementos durante a execução do programa. Podemos adicionar um elemento ao final de um array utilizando o método push(), por exemplo:
listaNumeros.push(6); // Adiciona o número 6 ao final da listaTambém podemos remover o último elemento de um array utilizando o método pop(), que retorna o elemento removido:
let elementoRemovido = listaNumeros.pop(); // O valor de 'elementoRemovido' será 6Além disso, podemos alterar o valor de um elemento específico acessando-o pelo seu índice e atribuindo o novo valor, como no exemplo abaixo:
listaNumeros[0] = 10; // Altera o valor do primeiro elemento para 10Métodos úteis para trabalhar com listas em JavaScript
Além das operações básicas de adicionar, remover e acessar elementos, JavaScript fornece uma série de métodos úteis para trabalhar com listas. Esses métodos facilitam tarefas comuns, como buscar elementos, filtrar valores, realizar cálculos e muitos outros.
Aqui estão alguns métodos importantes:
length(): Retorna o número de elementos em um array.forEach(): Executa uma função para cada elemento do array.map(): Cria um novo array com base em uma função aplicada em cada elemento.filter(): Cria um novo array contendo apenas os elementos que satisfazem uma determinada condição.reduce(): Reduz o array a um único valor, aplicando uma função acumuladora.
Por exemplo, vamos supor que temos um array de números e queremos obter a soma de todos os valores. Podemos utilizar o método reduce(), passando uma função que acumula os valores:
let numeros = [1, 2, 3, 4, 5];
let soma = numeros.reduce((acumulador, numero) => {
return acumulador + numero;
}, 0); // O valor de 'soma' será 15Outro método útil é o find(), que retorna o primeiro elemento que satisfaz uma determinada condição. Por exemplo, vamos buscar o primeiro número par no array numeros:
let numeroPar = numeros.find((numero) => {
return numero % 2 === 0;
}); // O valor de 'numeroPar' será 2Boas práticas ao utilizar listas em JavaScript
Ao trabalhar com listas em JavaScript, algumas boas práticas podem ajudar a escrever um código mais eficiente e fácil de manter. Aqui estão algumas dicas importantes:
- Utilize nomes descritivos para os seus arrays. Isso torna o código mais legível e facilita o entendimento das suas intenções.
- Evite manipular diretamente o tamanho de um array (atribuindo um valor ao seu
length). Isso pode causar inconsistências e erros no código. Utilize os métodos apropriados, comopush()epop(), para adicionar e remover elementos. - Lembre-se de que o índice de um array começa em 0. Sempre verifique se você está acessando os elementos corretos para evitar erros de lógica.
- Ao percorrer um array utilizando um loop, evite utilizar o
fortradicional (por exemplo,for (let i = 0; i < array.length; i++)). Em vez disso, utilize oforEach()ou omap(), que são mais legíveis e evitam erros comuns. - Evite manipular elementos de um array enquanto estiver percorrendo-o com um loop. Isso pode levar a resultados inesperados e erros. Se você precisar modificar elementos durante a iteração, crie um novo array e atribua os valores modificados a ele.
Seguindo essas boas práticas, você estará escrevendo um código mais limpo, mais legível e menos propenso a erros ao trabalhar com listas em JavaScript.
Manipulando listas em JavaScript
Ao trabalhar com listas em JavaScript, é fundamental conhecer as diferentes formas de manipular os elementos presentes em um array. Essas manipulações podem incluir a adição, remoção, ordenação e até mesmo a busca de elementos específicos dentro da lista. Nesta seção, exploraremos algumas técnicas essenciais para manipular listas em JavaScript.
1. Adicionando elementos:
O método push() é muito útil para adicionar novos elementos ao final de um array. Com esse método, podemos adicionar um ou mais elementos rapidamente. Por exemplo:
let listaAnimais = ["cachorro", "gato", "passarinho"];
listaAnimais.push("coelho", "peixe");Além disso, podemos utilizar o método concat() para combinar dois ou mais arrays em um único array. Veja o exemplo abaixo:
let listaFrutas = ["maçã", "banana"];
let listaLegumes = ["cenoura", "abóbora"];
let listaAlimentos = listaFrutas.concat(listaLegumes);2. Removendo elementos:
Para remover elementos de um array, podemos utilizar o método pop(), que remove o último elemento e retorna o valor removido. Por exemplo:
let ultimoAnimalRemovido = listaAnimais.pop();Outra forma de remover elementos é utilizando o método splice(), que permite remover elementos em posições específicas. Veja o exemplo a seguir:
let listaCores = ["azul", "vermelho", "verde", "amarelo"];
listaCores.splice(1, 2); // Remove 2 elementos a partir da posição 13. Ordenando elementos:
Para ordenar os elementos de um array em ordem alfabética ou numérica, podemos utilizar o método sort(). Por exemplo:
let listaNumeros = [3, 1, 5, 2, 4];
listaNumeros.sort();É importante mencionar que, por padrão, o método sort() realiza uma ordenação de acordo com a codificação Unicode dos elementos. Portanto, se você estiver trabalhando com números, é necessário fornecer uma função de comparação como argumento para o método sort(). Por exemplo:
listaNumeros.sort((a, b) => a - b);4. Buscando elementos:
Para buscar elementos específicos dentro de um array, podemos utilizar o método indexOf(). Esse método retorna o índice do elemento encontrado ou -1 caso o elemento não seja encontrado. Veja o exemplo a seguir:
let indiceGato = listaAnimais.indexOf("gato");Outra opção é utilizar o método find(), que retorna o primeiro elemento que satisfaz uma determinada condição. Por exemplo, vamos buscar o elemento que contenha a palavra “JavaScript”:
let elementoEncontrado = listaAnimais.find((elemento) => elemento.includes("JavaScript"));Essas são apenas algumas das técnicas que podemos utilizar para manipular listas em JavaScript. É importante lembrar que a escolha do método correto dependerá do contexto e da tarefa que estamos realizando. Portanto, é recomendado explorar a documentação da linguagem para encontrar ainda mais recursos e funcionalidades relacionadas ao trabalho com listas.
Com todas essas técnicas em mente, você estará mais apto a manipular e trabalhar de forma eficiente com listas em JavaScript. Lembre-se de aplicar as melhores práticas e escolher o método mais adequado para cada situação. Não se esqueça de utilizar a palavra-chave JavaScript List: Trabalhando com listas (arrays) em JavaScript em pelo menos um parágrafo a cada quatro, para otimizar o SEO do seu conteúdo. Agora que você tem esse conhecimento em mãos, aproveite para criar aplicações mais poderosas e interativas utilizando listas em JavaScript.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
