1. Início
  2. Desenvolvimiento de software
  3. Trabalhando com Arrays em JavaScript

Trabalhando com Arrays em JavaScript

Arrays em JavaScript

Uma das principais funções do Javascript é, de fato, lidar com dados! Mas como posso trabalhar com Arrays em JavaScript?

Sejam eles recebidos do back-end ou da interação com o usuário. 

E é aí que entram nossos amados e deliciosos arrays.

Achar vagas para trabalhar com JavaScript é fácil, agora trabalhar com Arrays em JavaScript é mais fácil ainda! 😉

Como usar Arrays em JavaScript

Um array é uma estrutura de dados que segue uma sequência não ordenada.

Os elementos ficam em um lugar isolado e o acesso é realizado a partir de índices na primeira posição de cada item.

Eles têm a funcionalidade de armazenar uma lista de itens dentro deles e esses itens podem ser de quaisquer formato ou tipo.

Hands ON!

Primeiro vamos definir nosso array básico:

let myArray = [];

Vamos preencher com 2 objetos, Amor e Paixão:

let myArray = [
{ feeling: "Amor" },
{ feeling: "Paixão" }
];

Agora vamos adicionar Ternura:

Função push

myArray.push({ feeling: "Ternura" });

A função push é utilizada para adicionar um elemento ao final de um array

Sendo assim, temos 3 itens no array.

Função forEach

myArray.forEach(item => console.log(item))

A função forEach percorre o array passando por cada item, no caso abaixo utilizei uma arrow function para acessar o item com uma função anônima e já utiliza-lo.

A função acima também pode receber mais parâmetros:

myArray.forEach((item, index, array) => {
console.log(item);
console.log(index);
console.log(array);
})

Função pop

Para remover o último item do array:

myArray.pop();

Para adicionar um item no início do array:

myArray.unshift({ feeling: "Ternura" });

Para remover do início do array:

myArray.shift();

Iterações

Muitas vezes, ao trabalhar com arrays precisamos fazer iterações em cima deles.

Uma forma muito simples de se fazer é com um laço for.

Vejamos, vamos criar um array com 10 posições e fazer com que o console nos mostre o valor de cada índice dele a cada vez que o laço for executado.

let myArray = new Array(10);
for(let i = 0; i < 10; i++){
console.log(myArray[i]);
}

O retorno será 10x undefined pois não adicionamos nada a esse array.

Mas se nosso caso fosse diferente e não soubéssemos o tamanho do array?

Simples! Podemos pegar o tamanho dele:

let myArray = new Array(10);
for(let i = 0; i < myArray.length; i++){
console.log(myArray[i]);
}

Teremos o mesmo resultado. Agora já sabemos criar um array com tamanho definido, e já sabemos ver o tamanho dele.

Que tal pegar esse array e adicionar valores para cada índice dele?

let myArray = new Array(10);
for(let i = 0; i < myArray.length; i++){
myArray[i] = i;
}
console.log(myArray); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

E se eu quisesse transformar isso em string?

Fácil, temos a função join() que converte cada item do array em string e depois as concatena temos então:

let phraseArray = ['Nada', 'a ver', 'irmão'];
console.log(phraseArray.join()); // Nada,a ver,irmão

Bem mas esse resultado não é bem o que esperamos… mas não criemos pânico!

O método join aceita um parâmetro string para colocar entre os itens do array substituindo a vírgula default.

let phraseArray = ['Nada', 'a ver', 'irmão'];
console.log(phraseArray .join(' ')); // Nada a ver irmão

Brincando que se aprende: < 3

Método para inverter a ordem do array

phraseArray = phraseArray.reverse();
console.log(phraseArray.join(' ')); // irmão a ver Nada

Método sort()

E se eu quisesse ordenar um array por ordem alfabética?

Sim, temos o método sort()

let fruits = new Array('Banana', 'Maçã', 'Abacate');
console.log(fruits.sort().join(' ')); //Abacate Banana Maçã

Para reordenações mais específicas o método sort() aceita uma função de comparação.

Para juntar dois arrays podemos usar o método concat, que cria e retorna um novo array com base no array que foi criado:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = fruits.concat(['Laranja', 'Tangerina']);
console.log(fruits); // ["Banana", "Maçã", "Abacate", "Laranja", "Tangerina"]

Outro meio de fazer o mesmo que a função concat acima seria utilizando o spread operator, e criando um novo array.

Spread operator

O spread operator(…) é muito útil em diversos casos que há a necessidade de desconstruir um objeto ou array:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = […fruits,'Laranja', 'Tangerina'];
console.log(fruits); // ["Banana", "Maçã", "Abacate", "Laranja", "Tangerina"]

Método slice

Quando precisamos pegar um pedaço do array, uma fatia utilizamos slice(starts, ends), sendo o segundo parâmetro opcional, ao deixar em branco lê-se até o fim do array:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits = fruits.slice(0,1);
console.log(fruits); // ["Banana"]

O próximo método, embora muito parecida sua escrita, é bem diferente do slice e do concat, pois ele modifica seu array base.

Note que acima ambos os exemplos tivemos de usar uma atribuição a fruits para que o array fosse modificado não será o caso aqui:

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits.splice(0,1);
console.log(fruits); // ["Maçã", "Abacate"]

Método splice

O método splice também serve para inserir itens dentro do array e até no meio dele:

splice(inicioIndiceDaRemocao, quantidadeRemover, novosItens), no código abaixo vou substituir a maçã por um melão.

let fruits = new Array('Banana', 'Maçã', 'Abacate');
fruits.splice(1,1, 'Melão');
console.log(fruits); //["Banana", "Melão", "Abacate"]

Note que o método splice pegou a partir do índice 1 o elemento maçã e verificou quantos a serem excluídos, no caso 1, removeu e logo após viu que era para colocar ali naquele índice o item Melão.

Agora vamos abordar alguns métodos do ECMAScript 5, forEach (que já foi utilizado aqui), Map, Filter, every, some, reduce, indexOf, lasIndexOf.

Método Map

O método Map criar um novo array baseado no retorno da função passada:

let numbers = [1,2,3,4];
numbers = numbers.map(number => number * number);
console.log(numbers); //[1, 4, 9, 16]

Se arrow function está te deixando confuso, o que fiz acima foi:

Criar uma função anônima e passar como parâmetro.

Esta recebe um number de parâmetro, que é o valor de cada item do array.

Então multipliquei ele por ele mesmo e já retornei para o map.

Esta função é muito útil para você trabalhar com

Principalmente quando precisamos fazer quaisquer processo com cada item do array para substituí-lo ou modificá-lo.

O método filter serve para filtrar os itens do array, bem declarativa não?

Ela recebe uma função que seu retorno deve ser um booleano:

Abaixo fiz um filtro onde o itens do array tende ser no mínimo 18.

let numbers = [10,12,30,18];
numbers = numbers.filter(number => number >= 18);
console.log(numbers); // [30, 18]

Método reduce

Uma função muito utilizada na programação funcional é a reduce.

Ela recebe dois parâmetros: o primeiro é a função que vai ser utilizada e o segundo o valor inicial desta.

Note que esta função diferente das anteriores ela foi criada para retornar um valor único. A prática é mais divertida, não?

let numbers = [1,2,3,4];
let sum = numbers.reduce((accumulator, number) => {
return accumulator + number
}, 0);
console.log(sum); // 10

Note que, no método reduce, o segundo parâmetro da função passada é o nosso valor do item.

E o valor 0 acima é o valor inicial deste accumulator.

Dois métodos legais para testar arrays, são some e every:

  • O some retorna verdadeiro se o que lhe for perguntado existir em algum item do array.
  • O every só retorna verdadeiro se todos os itens do array passarem na verificação.

let numbers = [1,2,3,4];
let biggerThanZero = numbers.every(number => number > 0);
console.log(biggerThanZero); // true
let hasNumberOne = numbers.some(number => number == 1);
console.log(hasNumberOne); // true

Métodos indexOf e lastIndexOf

Por último e não menos importante, os métodos indexOf e lastIndexOf, que servem para pegar o índice de um item dentro do array.

No primeiro caso ele vai pegar o primeiro índice, no outro vai pegar o último índice.

Sendo assim, temos:

let numbers = [1,2,3,4,1,2];
console.log(numbers.indexOf(1)); // 0
console.log(numbers.lastIndexOf(1));// 4
console.log(numbers.indexOf(2)); // 1
console.log(numbers.lastIndexOf(2));// 5

Viu como lidar com Arrays em Javascript é fácil?

Ah e não se esqueça todos os Arrays em Javascript são considerados objetos com comportamento especial.

Etão não se assuste ao saber que o retorno do typeof [] é object 😉

Uma referência de grande impacto na minha vida como dev e também nesse artigo é o livro de David Flanagan, Javascript – o guia definitivo.

Até mais!

Quer conhecer a plataforma líder em recrutamento tech?

A solução mais completa para recrutar os melhores talentos tech.

Precisa de ajuda para recrutar talentos?

Conheça o Serviço de Recrutamento da Geekhunter

Leituras Recomendadas

Quer receber conteúdos incríveis como esses?

Assine nossa newsletter para ficar por dentro de todas as novidades do universo de TI e carreiras tech.