Métodos para trabalhar com arrays no JavaScript

Métodos para trabalhar com arrays no JavaScript

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


Encerramento

Neste artigo você aprendeu como trabalhar com arrays no JavaScript.


Se você deseja aprofundar seus conhecimentos em JavaScript eu recomendo você dar uma olhada nestes artigos que mostram outros assuntos muito importantes para quem trabalha com JavaScript:

Resolvendo problemas comuns de matemática com JavaScript

Manipulando strings com JavaScript

 

 

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

Calculando a idade com JavaScript
27/10/2019JAVASCRIPT

Calculando a idade com JavaScript

Um exemplo de como calcular a idade usando JS

Saiba mais...
Pesquisando CEP usando AJAX
08/02/2017JAVASCRIPT

Pesquisando CEP usando AJAX

Aprenda como usar o JavaScript para melhorar seus formulários!

Saiba mais...

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