Utilizar funções de Array úteis em JavaScript

No mundo do JavaScript, Arrays são um tipo de dado fundamental que você usa com frequência. Com cada nova versão do ECMAScript, o manuseio de Arrays melhorou através de vários métodos inovadores. Neste tutorial, você aprenderá a utilizar algumas das novas funções de Array mais úteis, que foram introduzidas do ES6 ao ES13. Vamos considerar tanto as funções novas quanto as comprovadas, que te ajudarão a trabalhar com Arrays de forma mais eficiente.

Principais insights

• find(): Procura em um Array e encontra o primeiro elemento que atende a um determinado critério.
• filter(): Cria um novo Array com todos os elementos que atendem à condição dada.
• map(): Transforma os elementos de um Array e gera um novo Array.
• reduce(): Combina todos os elementos de um Array em um único valor.
• some(), every(): Verifica se pelo menos um elemento ou todos os elementos de um Array atendem a uma determinada condição.

Guia passo a passo

1. Entendendo o método find()

O método find() é uma das funções que foram introduzidas no ES6. Você a utiliza para encontrar um elemento específico em um Array. O nome já diz tudo: com find(), você pesquisa em um Array e ele te retorna o primeiro elemento que atende aos seus critérios.

Para usar find(), você deve passar uma função de callback que define uma condição. Essa função será chamada para cada elemento no Array.

Neste exemplo, "Laranja" é encontrado e retornado. Se você estiver procurando por outra cor, o resultado poderá ser diferente.

2. findIndex() para o índice do elemento buscado

Além de find(), existe também o findIndex(), que retorna o índice do primeiro elemento que atende à condição. Isso é útil quando você precisa do índice real no Array.

Neste caso, foundFruitIndex retorna o índice de "Laranja", que é 2, uma vez que Arrays são baseados em zero.

3. Filtrando Arrays com filter()

O método filter() permite que você crie um novo Array que contém apenas os elementos que atendem a uma determinada condição. Aqui, usamos filter() para retornar todas as frutas cuja extensão é maior que 5.

O resultado mostra, então, todas as frutas que têm mais de cinco letras, por exemplo, "Banana".

4. map() para transformações

Com o método map(), você pode modificar os valores em um Array e criar um novo Array. Por exemplo, para obter os comprimentos dos nomes das frutas.

Aqui você obtém os comprimentos dos nomes das frutas como um Array: [5, 6, 6, 6].

5. reduce() para resumir valores

O método reduce() é uma das funções mais poderosas, que te ajuda a condensar todos os valores de um Array em um único valor.

O resultado é 15, pois todos os valores foram somados.

6. Verificando condições com some() e every()

Os métodos some() e every() verificam os elementos de um Array quanto a condições. Com some(), você pergunta se pelo menos um dos elementos atende à condição, enquanto every() assegura que todos os elementos a atendem.

Aqui, hasLargeFruits indica se há pelo menos uma fruta com mais de seis letras.

7. Array.from() para criar Arrays

Esse método permite que você crie um Array a partir de outra estrutura.

Isso converte uma coleção HTML em um verdadeiro Array, para que você possa aplicar os métodos de Array sobre ele.

8. Verifique se algo é um Array com Array.isArray()

Para verificar se um objeto é um Array, você usa o método Array.isArray().

O resultado é true, pois fruits é um Array.

Resumo – Novas funções de Array úteis em JavaScript

Neste guia abrangente, você aprendeu como usar várias funções de Array em JavaScript de forma eficaz, começando com as bem conhecidas find(), filter(), map() e reduce() até métodos menos frequentes, mas ainda úteis, como some(), every(), Array.from() e Array.isArray(). Essas funções tornarão seu código mais atual e seu processamento de dados mais eficiente. Experimente esses métodos em seus projetos para otimizar seu trabalho com Arrays.