Parte 2: Truques de Programação: [Operadores e Expressões] - Javascript #2

Manipulação de Arrays

A seguir estão alguns métodos e funções nativas de manipulação de arrays. Esses métodos são muito úteis no dia a dia do programador que usa JavaScript e facilitam bastante a leitura do código e também aumenta consideravelmente a performance da aplicação.

Criando Sequências Numéricas

Sequência Crescente

Muitas pessoas quando querem fazer uma sequência numérica usam Estruturas de Repetição como o for, por exemplo. Existem funções nativas no JavaScript que facilitam, e muito, a criação desse tipo de sequência, como o exemplo a seguir:

var sequência_numérica = Array(10).fill(0).map((_, index) => index);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Você pode usar o Construtor Array para definir o tamanho da sua array, no nosso caso o tamanho da nossa sequência numérica. O método fill (nativo do Array) serve para, na tradução literal, encher a nossa array com a quantidade definida dentro do Construtor. Inicialmente, enchendo 10 espaços na array com o valor 0. O map é outro método nativo do Array e a função dele é fazer uma varredura pela array inteira e a cada item da array que esse método passar, ele chama uma função. Essa função de callback do método map retorna 2 parâmetros principais: <Item> e o <Índice>, ou seja, a cada item da array que esse método passar, ele vai retornar o próprio item e a posição desse item na array. * Sabendo disso, pra fazer a nossa sequência numérica, é só usar o map na nossa array de zeros e a cada item, retornar apenas a posição desse item na array, formando assim a nossa sequência numérica.

Sequência Decrescente

Pra criar uma sequência numérica decrescente é muito simples. Assim como os métodos anteriores, tem outro método que muita gente não conhece que é o metodo reverse. Como o diz o nome, esse método serve para reverter uma array. Então, é só a gente criar a nossa array sequêncial, igualzinha a anterior e, adicionar o método reverse nela:

var sequência_numérica_reversa = Array(10).fill(0).map((_, index) => index).reverse();
// [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]

E pronto, está feita a nossa Sequência Numérica Decrescente.

Transformando Argumentos em Array

Pra quem mexe bastante com Funções no Javascript, em algum momento já precisou enviar/receber muitos parâmetros em uma função. Isso, em um determinado momento, começa a ser inviável inserir muitos parâmetros em hard coded. Pra resolver isso, tem alguns "segredos" no javascript que talvez você não conheça... Se em algum caso você quiser ou precisar receber muitos paramêtro de uma função, você pode usar uma palavrinha muito bacana que é arguments dentro do escopo da função, e essa palavrinha é responsável por retornar todos os parâmetros, independente da quantidade, em um Objeto Numerado, como no exemplo a seguir:

function minhaFunção(){
    arguments;
    /*
    {
        0: 'quantos',
        1: 'parâmetros',
        2: 'eu',
        3: 'quiser...'
    }
    */
};
minhaFunção('quantos', 'parâmetros', 'eu', 'quiser...');

Esse Objeto Numerado é perfeito para a nossa manipulação porque podemos transformar ele em uma array de verdade usando o método from do Constrtor Array.

function minhaFunção(){
    Array.from(arguments);
    // ['quantos', 'parâmetros', 'eu', 'quiser...']
};
minhaFunção('quantos', 'parâmetros', 'eu', 'quiser...');

Mas, se na verdade você precisa enviar muitos parâmetros à uma função? Pra fazer isso é muito mais simples do que o exemplo anterior. Siga o exemplo a seguir:

function minhaFunção(){
    console.log(argumets);
};

var parâmetros = [1, 2, 3, 4, 5, 6];
minhaFunção(...parâmetros);

Nesse exemplo foi usado esses ... (três pontos) que é um operador de atribuição do Javascript. Se você não conhece esse operador, veja o seguinte exemplo:

var array1 = ['a', 'b', 'c'];
var array2 = [1, 2, 3];

var array3 = [...array1, ...array2];
// ['a', 'b', 'c', 1, 2, 3]

Esse operador tem uma função, se não igual, bem parecida com o <Array>.concat.

Então, seguindo essa lógica, todos os itens que estão dentro daquela array, são enviados como parâmetro na função, porque tais itens foram atribuidos com o operador.

Peneirando Arrays

No Javascript, Arrays podem ter quase que infinitos elementos, e também pode ter um monte de arrays dentro de arrays: [[1], [[[[0]]]], [[3]]]; Isso, pra algumas aplicações pode ser um problema, até quando está consumindo uma API que retorna milhares de dados. E se tivesse um método que transforma esse monte de arrays em uma array linear? Sim... existe sim esse incrível método que é o <Array>.flat:

var array = [1, [2], [3, 3], [[[4], 4]]];

array.flat(1);
// [1, 2, 3, 3, [[4], 4]]]...

array.flat(2);
// [1, 2, 3, 3, [4], 4]

array.flat(Infinity);
// [1, 2, 3, 3, 4, 4]

Esse método precisa de pelo menos um parâmetro principal que é o depth que resumindo, é o valor da profundidade que o método vai "planificar" a array. Esse valor vai de 1 até infinito.

Conclusão

Esse são truques simples porém muito útil no seu dia a dia de programador. Em breve terá mais truques como esse em diversas áreas do Javascript e talvez outras linguagens de programação. Espero ter acrescentado algo no seu conhecimento e se tiver alguma sugestão ou dicas como essas, por favor deixe sua contribuição nos comentários abaixo.

const arr = [...Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]