Trabalhando com 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 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 assim uma sequência não ordenada.
Os elementos ficam em um lugar isolado e o acesso se realiza 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 se utiliza 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();
A adicionar um item no início do array:
myArray.unshift({ feeling: "Ternura" });
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 assim 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 tiver execução.
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 portanto 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çãojoin()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 assim 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 assim mais específicas o método sort() aceita uma função de comparação.
Sobretudo para juntar dois arrays podemos usar o método concat, que cria e retorna um novo array com base no array que teve criação:
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 afinal 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 assim 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 então 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 primeiramente 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]
Searrow 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 sobretudo 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.
Primeiramente 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 indexOfe 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.
Então não se assuste ao saber que o retorno dotypeof [] é 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.
Leia também “Front-end e a origem e o futuro da área“