ES6 Métodos
>
>
>
ES6, que é a forma curta do ECMAScript 6, é a versão do JavaScript que foi lançada em Junho de 2015. Parece que os desenvolvedores que mantêm o JavaScript como o meu mês de nascimento porque foi quando a maioria de suas versões foram lançadas.
Se você está apenas aprendendo JavaScript, ES6 vai tornar a vida muito mais fácil para você. Ele fornece não apenas métodos de array, mas também fornece coisas como desestruturação, funções de seta, uma melhor maneira de escrever código orientado a objetos e modular, entre outras coisas.
A maior parte desses métodos de array do ES6 tem uma função de chamada de retorno, e como resultado eles são chamados de métodos de array de ordem superior. Funções de setas são muito comuns em funções de ordem superior, pois simplifica nosso código
O método de mapa
Se há algum método de array ES6 que você vai usar quase todo o tempo, é este método. É o meu melhor método de array tanto em JavaScript quanto em Python. Apesar de alguns desenvolvedores de JavaScript terem tentado implementar map antes do ES6, o método padrão map foi introduzido em JavaScript no ES6. No trecho de código abaixo, eu implementei o map de três maneiras:
- Usando as funções regulares do JavaScript: Aqui passei dois argumentos para a função, primeiro
item, que é o elemento em que quero fazer algo, e um argumento opcional,index, que é o índice de cada elemento - Usando funções de seta: Eu também passei dois argumentos como no primeiro exemplo, mas a função callback aqui é uma função de seta, o que torna o código muito mais limpo.
- Eu também usei funções de seta, mas passei apenas um argumento – o item sobre o qual quero iterar. Isto é útil se eu não precisar do index.
>
>
O método do filtro
O método filter é outro método de array de ordem superior que você deve usar hoje. O que filter faz é simples. Dado um array de elementos, nós queremos retornar um novo array do array inicial, onde uma condição particular é true. A função callback deve retornar um boolean, e o elemento que obedece à condição é o que estará no novo array.
>
>>
>
O método de redução
>
Isso é muito bom, e eu acho que é o mais difícil de todos os métodos que eu mencionei até agora. O que este método faz é usar um determinado callback para reduzir o array. Por exemplo, se eu quiser encontrar a soma de todos os elementos de um array ou o produto de todos os elementos de um array, este método é um bom método para usar, ao invés de fazer looping e incrementar a soma inicial ou produto.
>
>
>
O método forEach
Este método é similar ao método map, mas neste caso, ele não retorna um novo array. É mais do tipo regular for loop em JavaScript, mas de uma forma mais limpa e mais avançada. São necessários três parâmetros, como você já deve saber. O primeiro é o item no array, o segundo é o índice do item (que é opcional), e o terceiro é o objeto array ao qual o elemento atual pertence.
No trecho de código abaixo, eu usei forEach para manipular o Document Object Model (DOM), que é bem legal. Posso atualizar o array, e os itens da lista renderizada no DOM serão alterados automaticamente.
>
>
O método concat
>
Há casos em que você vai querer juntar ou fundir dois ou mais arrays juntos. Então, esta função será muito útil. Chamando concat em duas matrizes produz um novo array que consiste nas duas matrizes combinadas.
>
>
>
Os todos e alguns métodos
Estes métodos são úteis se você quiser saber se todos os elementos de um array passam uma condição e se alguns dos elementos de um array passam uma condição, respectivamente.
>>
Outros métodos incluem:
O método de preenchimento
Preencher cada elemento do array com um valor que é passado como parâmetro: .fill(1) // .
O método de entrada
O que faz o array comportar-se como um objeto com um par de valores chave, onde a chave é o índice e o valor é o elemento.
O método de procura
O método retorna o primeiro elemento de um array que passa num teste. Ele leva uma função callback, que retorna um boolean.
O método splice
Este método leva um número infinito de parâmetros – os dois primeiros sendo o índice onde você quer começar a inserir e remover elementos e o número de elementos que você quer remover, respectivamente – e os parâmetros restantes sendo os elementos que você quer adicionar ao array. Ele retorna um array dos elementos removidos e modifica o array.
O método inverso
O método inverso inverte o array. Note que ele o modifica, significando que ele muda o array ao invés de apenas criar a cópia dele.
>
>
>
O método join
>
Este método transforma um array em um array em uma string. Note que ele não modifica o array – ele apenas cria uma cópia dele. O reverso deste método é o método split, que transforma uma string em um array. Ele toma uma string como parâmetro, que é o que será usado para unir cada elemento do array.
O método flat
O método flat é um novo método que foi adicionado no ES11 (ES11 foi criado em Junho). Este método aplana um array.
Vamos dizer que temos um array que contém um array, e queremos encontrar a soma e o produto de cada elemento nos arrays dentro do array. O que eu quero dizer é que se eu tiver um array definido por , ], a soma deve ser 10 e o produto deve ser 24.
Uma maneira de fazer isso é fazer loop através do array inicial e loop através de cada elemento e obter a soma e produto.
Com ES6, eu posso fazer loop através do array inicial e usar o método reduce para obter a soma e produto de cada elemento no array principal – usando isso para obter a soma total e produto. Mas com o array flat, eu posso flat o array principal, retornando assim um único array contendo apenas números, e posso usar o método reduce nele.
O método flatMap
Esta é a combinação de flat e map. Ele mapeia cada elemento do array para uma dada função de callback e então achata o array resultante.
Digamos que gostaríamos de ter o quadrado de cada elemento em um array não achatado, e nós gostaríamos de achatá-lo. Este método vai facilitar-nos a vida. Na parte onde eu usei o método flatMap no trecho de código abaixo, ele pega um elemento que é um array, e eu devolvi um novo array, que é o quadrado dos elementos. E finalmente, ele achata o array resultante.
>
>
>