JAVASCRIPT

Métodos para trabalhar com arrays no JavaScript

Veja como resolver os problemas mais comuns ao utilizar arrays no JavaScript

29/05/2022JAVASCRIPT

Neste artigo vamos ver as operações mais comuns para trabalhar com arrays no JavaScript.

O que você vai ver neste artigo:

* Iterando arrays

* Localizar a primeira ocorrência ou posição de acordo com uma determinada condição

* Retornar a última ocorrência de um determinado elemento.

* Retornar uma determinada posição do array.

* Filtrando e mapeando arrays

* Totalizando um array

* Verificando se o array possui algum elemento que atende uma determinada condição.

* Removendo elementos de um array

* Adicionar ou alterar elementos do array

* Convertendo de array em string e de string para array

* Ordenando um array

* Juntar dois arrays

 

Para os exemplos a seguir vamos utilizar o seguinte array:

 

var dados = [3,5,6,8,11,12,16];

 

Iterando arrays

 

Uma das formas mais antigas de iterar um array é utilizando For. For recebe 3 argumentos, uma variável que contem a posição inicial, o total de registros que queremos retornar, e um incremento da varíavel informada no primeiro parâmetro.

 

var dados = [3,5,6,8,11,3, 12,16];

for (var i = 0; i < dados.length; i++) {

  console.log(dados[i]);

}

 

O método length do array permite obter a quantidade de elementos. 

 

Uma outra forma de iterar o array é utilizando forEach

 

var dados = [3,5,6,8,11,3, 12,16];

dados.forEach((item, index) => {

console.log(item);

console.log(index);

})

 

O valor item se refere ao conteudo do array e o valor index é a posição atual que está sendo lida.

 

Localizar a primeira ocorrência ou posição de acordo com uma determinada condição

 

O método find() permite localizar a primeira ocorrência de uma determinada condição. No exemplo a seguir vamos iterar o array para localizar números onde o resto da divisão por zero seja igual a 0.

 

var dados = [3,5,6,8,11,3, 12,16];

var novo_array = dados.find((n)=>n%2 ===0);

console.log(novo_array);

 

O retorno foi 6. Caso seja necessário localizar a posição ao invés do conteúdo do array, podemos utilizar o método findIndex().

 

var dados = [3,5,6,8,11,3, 12,16];

var novo_array = dados.findIndex((n)=>n%2 ===0);

console.log(novo_array);

 

O retorno foi 2, já que o número 6 é o terceiro elemento do nosso array. Não esqueça que no JavaScript a posição inicial do array é zero.

 

Se você quer informar um número e deseja saber qual a posição no array pode usar o método indexOf(). Se o número não for localizado, o retorno vai ser -1.

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.indexOf(11);

console.log(resultado);

 

Retornar a última ocorrência de um determinado elemento.

 

Como vimos no último exemplo, o método indexOf() retorna a posição de primeira ocorrência que foi localizada. Caso você queira retornar a última posição pode utilizar o método lastIndexOf()

 

var dados = [3,5,6,8,11,3, 12,16];

var resultado = dados.lastIndexOf(3);

console.log(resultado);

 

Retornar uma determinada posição do array.

 

Para retornar uma determinada posição do array você pode utilizar o método at(). Caso você informe um valor negativo, ele vai retornar a partir do final do array.

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.at(2);

console.log(resultado);

 

Filtrando e mapeando arrays

 

Nos exemplos anteriores localizamos o primeiro número que tinha o resto da divisão por 2 igual a zero. Como você deve ter percebido, temos mais números nesta situação. Como retornar todos os números que atendem esta condição?

Para isso podemos utilizar o método filter(). Ele vai retornar um novo array de acordo com a condição informada

 

var dados = [3,5,6,8,11,12,16];

var novo_array = dados.filter((n)=>n%2 ===0);

console.log(novo_array);

 

Se você quiser manipular cada elemento do array pode utilizar o método map(). No exemplo a seguir, vamos somar 1 a cada elemento do nosso array

 

var dados = [3,5,6,8,11,12,16];

var novo_array = dados.map((n)=>n+1);

console.log(novo_array);

 

Totalizando um array

 

Para somar todo o conteúdo de nosso array podemos utilizar o método reduce(). Reduce recebe dois parâmetros, o primeiro é o valor anterior e o segundo é o valor atual

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.reduce((anterior, atual)=>anterior+atual);

console.log(resultado

 

Verificando se o array possui algum elemento que atende uma determinada condição.

 

Como vimos nos exemplos anteriores, os métodos find() e findIndex() permitem localizar o elemento ou a posição do elemento de acordo com uma determinada condição.

Porem, em alguns casos, o que queremos é apenas saber se o array atende uma determinada condição ou não.

Para isso utilizamos os métodos every() e some().

O método every() verifica se todos os elementos do array atendem a uma determinada condição. Em caso positivo ela retorna true, caso contrário false

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.every((n)=>n%2);

console.log(resultado)

 

A resposta do código acima foi false porque nem todos os números de nosso array tem o resto da divisão por 2 igual a zero.

Já o método some() verifica se pelo menos um dos elementos do array atende a condição informada. Neste caso o retorno é true, caso contrário o retorno é false. O código a seguir deve retornar true.

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.some((n)=>n%2);

console.log(resultado);

 

Também é possível verificar se dentro de nosso array existe um determinado número. Para isso utilizar o método includes. Se o valor informado existir no array ele retorna true, caso contrário false.

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.includes(11);

console.log(resultado);

 

Removendo elementos de um array

 

Para remover o primeiro elemento de um array podemos utilizar o método shift().

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.shift();

console.log(resultado);

console.log(dados);

 

Perceba que no código acima a variável resultado contem o elemento que foi removido.

Para remover o último elemento de um array podemos utilizar o método pop()

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.pop();

console.log(resultado);

console.log(dados);

 

Para remover algum elemento a partir de uma determinada posição você pode utilizar o método splice. São necessários dois parâmetros, o primeiro é a posição e o segundo é a quantidade de elementos a serem removidos a partir da posição informada

 

var dados = [3,5,6,8,11,3, 12,16];

dados.splice(3,1);

console.log(dados);

 

No exemplo o número 8 foi removido de nosso array

 

Se você deseja cortar o array a partir de uma certa posição pode utilizar o método slice. Ele vai criar um novo array com os elementos a partir da posição informada

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.slice(4);

console.log(resultado);

console.log(dados);

 

Adicionar ou alterar elementos do array

 

Para adicionar novos elementos ao array podemos usar o método push

 

var dados = [3,5,6,8,11,12,16];

dados.push(18);

console.log(dados)

 

O novo elemento foi adicionado no final do array. Caso você queira adicionar um novo elemento no começo do array pode usar o método unshift

 

var dados = [3,5,6,8,11,12,16];

dados.unshift(18);

console.log(dados);

 

Se você quer adicionar um novo elemento numa determinada posição do array pode usar o método splice. Usamos o método splice num exemplo anterior para remover elementos do array. Neste exemplo vamos passar ao slice 3 parâmetros, o primeiro é posição dentro do array, o segundo vai ser a quantidade de elementos que vamos excluir, que neste caso é zero, e por fim, o valor que queremos adicionar.

 

var dados = [3,5,6,8,11,3, 12,16];

dados.splice(3,0, 99);

console.log(dados);

 

Neste exemplo adicionamos o número 99 após a posição 3 do array

Podemos usar o splice também para alterar elementos do array. No exemplo a seguir, vamos trocar o número 8, que está na posição 3 do array pelo número 99.

 

var dados = [3,5,6,8,11,3, 12,16];

dados.splice(3,1, 99);

console.log(dados);

 

Também é possível adicionar valores estáticos ao array utilizando o método fill. O método fill permite sobrescrever valores e substituir por um valor fixo. No exemplo a seguir, vamos substituir os valores a partir da posição 5 pelo valor 99

 

var dados = [3,5,6,8,11,3, 12,16];

dados.fill(99,5);

console.log(dados);

 

Convertendo de array em string e de string para array

 

Uma forma simples de converter nosso array numa string é utilizar o método toString()

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.toString();

console.log(resultado);

 

Outra forma de converter o nosso array numa string é utilizar o método join(). Como parâmetro informamos o separador desejado. No exemplo a seguir vamos criar uma string com os números de nosso array separados por traço.

 

var dados = [3,5,6,8,11,12,16];

var resultado = dados.join('-');

console.log(resultado);

 

Para converter uma string para array utilizamos o método split(). Ele recebe como parâmetro qual o separador que deve ser utilizado.

 

var dados = "3,5,6,8,11,12,16";

var resultado = dados.split(',');

console.log(resultado);

 

Perceba que neste exemplo os números foram adicionados como string dentro de nosso array. Para corrigir isso podemos usar o retorno do método split() junto com o método map(). Como vimos nos exemplos anteriores, o método map() permite manipular cada elemento de nosso array. Como a nossa string possui números inteiros, podemos usar a função parseInt() para converter a string númerica num número inteiro

 

var dados = "3,5,6,8,11,12,16";

var resultado = dados.split(',').map(function(item) {

    return parseInt(item, 10);

});

console.log(resultado);

 

Quando queremos criar um array utilizando um objeto que não é um array também podemos usar o método from().

 

var dados = "Bins Blog";

var resultado = Array.from(dados);

console.log(resultado);

 

Ordenando um array

 

Para ordenar os números de nosso array podemos utilizar o método sort()

 

var dados = [3,5,6,8,11,3, 12,16];

dados.sort();

console.log(dados);

 

Ao executar este código você vai perceber que os números 11, 12 e 16 vieram primeiro. Isso ocorre porque ele tenta fazer uma ordem alfabética. Para ordenar corretamente este array de números inteiros precisamos ´passar uma função como parâmetro ao método sort()

 

var dados = [3,5,6,8,11,3, 12,16];

dados.sort(function(a, b) {

  return a - b;

});

console.log(dados);

 

Caso você queira ordenar o array de forma decrescente pode fazer um pequeno ajuste na função enviada como parâmetro para o método sort()

 

var dados = [3,5,6,8,11,3, 12,16];

dados.sort(function(a, b) {

  return  b - a;

});

console.log(dados);

 

 

Para inverter o array podemos usar o método reverse()

 

var dados = [3,5,6,8,11,3, 12,16];

dados.reverse();

console.log(dados);

 

Para ordenar de forma aleatória o nosso array será necessário combinar alguns dos métodos que vimos neste artigo.

 

var dados = [3,5,6,8,11,3, 12,16];

var resultado = dados

  .map(value => ({ value, sort: Math.random() }))

  .sort((a, b) => a.sort - b.sort)

  .map(({ value }) => value)

console.log(resultado);

 

Este exemplo foi um pouco mais complexo do que os anteriores, já que tivemos que usar 3 métodos na sequência. Utilizando o primeiro método map foi criado um objeto e através do método Math.random foi criada um valor aleatório para este objeto. O sort ordena este array por este campo com valor aleatório, e o último método map extrai o valor do objeto criado pelo primeiro map.

 

Juntar dois arrays

 

Para juntar dois arrays podemos usar o método concat()

 

var dados = [3,5,6,8,11,3, 12,16];

var dados2 = [20,21,22,23];

resultado = dados.concat(dados2);

console.log(resultado);

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

Outros conteudos que podem ser de seu interesse

Mascaras para campos de formularios com Javascript
02/08/2020JAVASCRIPT

Mascaras para campos de formularios com Javascript

Veja como criar máscaras para campos de formulários com Javascript

Saiba mais...
Calculando a idade com JavaScript
27/10/2019JAVASCRIPT

Calculando a idade com JavaScript

Um exemplo de como calcular a idade usando JS

Saiba mais...

Conteúdo sobre banco de dados sem complicação!

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo