Manipulando e Trabalhando com Arrays.

Um conteúdo que tem sido constante nos meus estudos, principalmente agora entrando em React, são os arrays.

Saber manipular arrays é algo muito importante porque é uma das principais formas que teremos para trabalhar os dados que nossas aplicações receberão. Um array é representado por colchetes [ ] e pode armazenar praticamente todo tipo de informação: strings, numbers, objects.

São diversas as formas que eles podem ser manipulados, mas essas formas merecem suas devidas atenções, porque algumas podem alterar seu array original e muitas das vezes você não vai querer isso.

Um detalhe que deve se ter atenção são os array-like, principalmente na hora de manipular o DOM, como a NodeList retornada pelo document.querySelectorAll() e as HTMLCollection retornadas por document.getElementsBy...().

Se você abrir o console do seu navegador e procurar o prototype de um Array, de uma NodeList e de um HTMLCollection você verá que o retorno será diferente e nem todos eles compartilham dos mesmos métodos, então em algum momento você poderá precisar do Array.from(), que irá converter um array-like em um array e permitir que você use os métodos de array.

Mas cuidado, analise bem o quanto realmente essa transformação é necessária e o quanto ela irá impactar sua aplicação.

Acessando elementos de um array:

Um array, como falei, é um conjunto de elementos armazenados dentro de colchetes. Você pode acessar algum elemento específico dele através do nome da variável onde ele está armazenado e a posição que ele se encontra no array.

Lembrando que o array sempre começa na posição zero, ou seja:

const idades = [32,21,33,43,1,12,8];

idades[0] = 32;

idades[3] = 43;

Manterei esse array acima como base para os exemplos a seguir no artigo.

Caso você tenha um array muito grande e você quer acessar um elemento que sabe que está lá, mas não sabe a posição, pode usar o método indexOf:

idades.indexOf(12) irá retornar 5;

Manipulação de arrays:

Métodos que modificam o array original:

Como falei acima, alguns métodos se aplicados irão mexer na estrutura do array original e devem ser utilizados com muita sabedoria.

sort(): É um método de ordenação, ele irá ordenar sempre a partir do primeiro valor de cada elemento, ou seja, um array de numbers ficará um pouco bagunçado se o método for chamado sem argumento algum.

O sort irá percorrer todos os números pegando primeiro o valor de cada elemento. É como se ele pegasse fizesse um idades[0][0], idades[1][0], idades[2][0], idades[3][0], idades[4][0], idades[5][0], idades[6][0].

Para que ele consiga ordenar por completo, precisamos passar como argumento do sort, uma arrow function que irá fazer um cálculo e a partir dele ordenar os números com um todo:

idades.sort() = [1, 12, 21, 32, 33, 43, 8];
idades.sort((a,b) => a - b) = [1, 8, 12, 21, 32, 33, 43];

Mas o que essa função faz? Ela basicamente pega o primeiro e o segundo elemento e faz uma subtração, caso o valor dê negativo, ela troca a ordem dos elementos. Depois faz com o segundo e o terceiro e assim vai até percorrer todo o array. Essa ação será realizada até que o array seja percorrido por completo e nenhum dos cálculos retorne algum valor negativo.

unshift() e push(): São dois métodos de adição de elementos em array e que retornam o length(quantidade de itens dentro de um array). O unshift() irá adicionar um elemento ao início do array enquanto o push() adicionará ao final do Array.

idades.unshift(14) retornará 8 que é o length de idades com um elemento a mais e idades será:
idades = [14,32,21,33,43, 1,12,8];
idades.push(5) retornará 9 que é o length de idades após o unsifht mais o push e o idades será:
idades = [14, 32,21,33,43,1,12,8, 5];

shift() e pop(): São dois métodos de remoção de elementos do array. O shift() remove o primeiro elemento e retorna ele. O pop() remove o último e retorna ele.

idades.shift() retornará 32;
idades.pop() retornará 8;

reverse(): inverte a ordem dos elementos dentro de um array.

idades.reverse() retornará [8,12,1,43,33,21,32];

splice(index, remover, item1, item2,...): ele irá manipular removendo itens e adicionando novos e retorna um array com os itens removidos. Index refere-se a posição inicial em que o splice começar a funcionar, remover refere-se a quantidade de elementos a serem removidos a partir daquela posição e os outros argumentos referem-se a itens que serão adicionados.

idades.splice(1, 2, 38, 24) retornará [21, 33];
idades = [32, 38, 24, 43,1,12,8];

Métodos que criam novos arrays a partir de um original:

concat(): concatena um array com os valores passados como argumento

const novasIdades = idades.concat(44);
novasIdades = [32,21,33,43,1,12,8, 44];

join(separador): pega o array e transforma em uma string unindo pelo que for passado como argumento separador.

const joinIdades = idades.join(‘-’);
joinIdades = “32-21-33-43-1-12-8”;

slice(início, final): pega o array e, como o nome diz, fatia da posição início até a posição final. Se passado apenas um valor de argumento, ele irá considerar como valor de início e irá fatiar o array daquela posição até o final. Se você quiser clonar um array, pode usar o slice sem nenhum argumento.

const sliceIdades = idades.slice(1, 3);
sliceIdades = [21,33, 43];

const sliceIdadesUmArg = idades.slice(2);
sliceIdadesUmArg = 33,43,1,12,8];

const cloneIdades = idades.slice();
cloneIdades = [32,21,33,43,1,12,8];

Bom, já sabemos como manipular um array. Agora precisamos trabalhar com eles. Para isso possuímos diversos métodos.

A ideia desses métodos é que eles possam fazer uma ação que irá se repetir para cada elemento do array. Cada método nos será útil para algo, temos alguns para executar uma ação que fará alguma alteração, outro nos retornará um novo elemento com informações desse outro array, temos também métodos para pesquisar nesses arrays e retornar só o que nos interessar. Vamos ver um pouco disso agora.

Primeiro falaremos do forEach(callback(itemAtual, index, Array)). Ele serve para percorrermos um array e fazer alguma alteração, implementar algo. Imagine que você está manipulando seu DOM, tem uma série de botões de Adicionar ao Carrinho e quer que todos botões tenham a mesma função: ``` const buttons = document.querySelectorAll(‘button’) buttons.forEach((button) => { button.addEventListener(‘click’, funcaoASerExecutada) }); ```

Ele não modifica o array original, caso você queira fazer essas mudanças, precisa informar todos os argumentos e iterar a partir do array:

Imagine que você tem aquele array de idades e quer transformar cada elemento em uma string informando que se tratam realmente de idades:

idades.forEach((idade, index, array) => { array[index] = idade + ' anos'});

idades = ["32 anos", "21 anos", "33 anos", "43 anos", "1 anos", "12 anos", "8 anos"];

O objetivo do forEach não é o retorno em si do método, mas o que será feito com cada item em cada iteração, por isso seu retorno sempre será undefined.

Agora o map(callback(itemAtual, index, array)), tem a mesma premissa do forEach, a diferença está no objetivo, o objetivo do map é sim o retorno de um novo array.

const idadeComAnos = idades.map((idade) => {
return idade + ‘ anos’;
});

idadeComAnos = ["32 anos", "21 anos", "33 anos", "43 anos", "1 anos", "12 anos", "8 anos"];

O map() é muito útil para trabalharmos com arrays de objetos(algo que vamos nos deparar muito). Suponha que você precise isolar uma propriedade de cada um dos objetos.

const alunos = [
    {
        nome: ‘Thiago’,
        conteúdo: ‘React’,
    },
    {
        nome: ‘Raphael’,
        conteúdo: ‘Node’,
    },
{
        nome: ‘Thays’,
        conteúdo: Redux,
    },
{
        nome: ‘Carol’,
        conteúdo: ‘Hooks’,
    }.
];

const nomeDosAlunos = alunos.map((aluno) => aluno.nome));
nomeDosAlunos = [‘Thiago’, ‘Raphael’, ‘Thays’, ‘Carol’];

Temos o reduce(callback(acumulador, valorAtual, index, array), valorInicial). Diferente dos demais métodos, o reduce possui dois argumentos, um fundamental que é a callback que espera até quatro argumentos: acumulador, ele acumulará o retorno de cada iteração; o valorAtual que refere-se ao elemento do array daquela iteração, o index desse elemento e o array que seria todo array que está sendo iterado. Depois dessa callback. O segundo argumento é o valor inicial do acumulador. Esse argumento é opcional, caso não declarado, o valor inicial do acumulador será o valor do primeiro elemento do array.

Pense que você quer somar todas as idades:

const todasIdades = idades.reduce((acumulador, itemAtual) => acumulador + itemAtual)
todasIdades = 150;

Para pesquisar em um array temos 4 métodos:

some(): do inglês algum, que retornará true ou false se algum elemento do array suprir a condição passada através de uma callback;

idades.some((idade) => idade === 12) retornará true porque há um elemento com valor 12 no array idades.

every(): do inglês todo, que retornará true ou false se todos elementos do array suprirem a condição passada através de uma callback.

idades.every((idade) => typeof idade === ‘number’) retornará true porque todos elementos do array idades são do tipo number.

find(): retornará o primeiro elemento encontrado no array que suprir a condição passada através de uma callback.

idades.find((idade) => idade < 30) retornará 21, porque é o primeiro elemento no array cujo valor é menor que 30.

filter(): similar ao find, mas mais amplo, retornará todos os elementos no array que suprirem a condição passada através de uma callback.

idades.filter((idade) => idade < 30) retornará [21, 1,12,8];

Espero que esse artigo ajude na compreensão dos conceitos de manipulação de arrays e como trabalhar com os elementos contidos neles em nossas aplicações.