Como Usar Métodos de Array em JavaScript: Métodos de Iteração

Introdução

No JavaScript, o tipo de dados array consiste em uma lista de elementos. Existem muitos métodos embutidos úteis disponíveis para os desenvolvedores JavaScript trabalharem com arrays. Métodos que modificam o array original são conhecidos como métodos modificadores, e métodos que retornam um novo valor ou representação são conhecidos como métodos acessores.

Existe uma terceira classe de métodos de array, conhecidos como métodos de iteração, que são métodos que operam em cada item de um array, um de cada vez. Esses métodos estão intimamente associados com loops. Neste tutorial, estaremos focando nos métodos de iteração.

Para aproveitar ao máximo este tutorial, você deve ter alguma familiaridade com a criação, indexação, modificação e loop através de arrays, os quais você pode revisar no tutorial Entendendo Arrays em JavaScript.

Neste tutorial, vamos usar métodos de iteração para percorrer matrizes, executar funções em cada item de uma matriz, filtrar os resultados desejados de uma matriz, reduzir itens de matriz para um único valor e pesquisar em matrizes para encontrar valores ou índices.

Entendendo as Funções de Setas

Muitos exemplos ao longo deste tutorial estarão usando expressões de função de seta JavaScript, que são representadas por um sinal de igual seguido por um sinal de maior que: =>.

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // código a ser executado
}

example();

A versão mais recente do JavaScript no momento da escrita permite o uso de funções de seta, que podem ser escritas com a seguinte sintaxe:

var example = () => {
  // código a ser executado
}

example();

Os parênteses em qualquer caso podem conter parâmetros. Quando há apenas um parâmetro, os parênteses podem ser omitidos, como neste exemplo:

var example = parameter1 => {
  // código a ser executado
}

Ao longo dos exemplos neste tutorial, vamos usar a sintaxe da função de seta. Para ler e entender mais sobre funções em JavaScript, leia a referência de Funções na Rede de Desenvolvedores da Mozilla.

forEach()

O método forEach() chama uma função para cada elemento em uma matriz.

Vamos começar com a seguinte matriz atribuída à variável fish:

let fish = [ "piranha", "barracuda", "cod", "eel" ];

Podemos usar forEach() para imprimir cada item na matriz fish no console.

// Imprimir cada item na matriz
fish.forEach(individualFish => {
	console.log(individualFish);
})

Depois de fazer isso, vamos receber a seguinte saída:

Output
piranha
barracuda
cod
eel

Outra maneira de fazer isso é usando a palavra-chave for loop e testando-a contra a propriedade length da matriz.

// Percorrer o comprimento da matriz
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

O código acima terá a mesma saída que o uso do método forEach(). Como um método de iteração especificamente destinado para uso com matrizes, forEach() é mais conciso e direto para esta tarefa específica.

map()

O método map() cria um novo array com os resultados de uma chamada de função em cada elemento do array.

Para um exemplo de como usar o método de iteração map(), podemos imprimir cada iteração de um loop no console. map() não altera o array original; em vez disso, ele retorna um novo valor de array.

let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Imprimir cada item no array
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

Também podemos usar map() para alterar os valores de cada item em um array. Para demonstrar isso, adicionaremos um s ao final de cada item no array fish para pluralizar cada palavra.

// Pluralizar todos os itens no array fish
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

A variável original fish permanece inalterada, mas pluralFish agora contém uma versão modificada da variável original.

filter()

O método filter() cria um novo array com os elementos que passam no resultado de um teste específico.

Podemos usar filter() para retornar um novo array contendo apenas os itens em uma lista que começam com uma letra específica. Para fazer isso, podemos utilizar a indexação de strings para chamar o primeiro item (ou letra) em cada item de string do array.

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filtrar todas as criaturas que começam com "s" em uma nova lista
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

Nós testamos quais itens no array têm um s no índice 0 e atribuímos o resultado a uma nova variável.

filter() é um método de iteração e não altera o array original.

reduce()

O método reduce() irá reduzir um array para um único valor.

Isso é comumente visto com números, como encontrar a soma de todos os números em um array.

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Obter a soma de todos os valores numéricos
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce() também pode ser usado com strings e outros tipos de dados. O valor retornado por reduce() pode ser um número, string, array ou outro tipo de dado. reduce() é um método de iteração que não altera o array original.

find()

O método find() retorna o primeiro valor em um array que passa em um determinado teste.

Como exemplo, vamos criar um array de criaturas marinhas.

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Em seguida, vamos usar o método find() para testar se alguma das criaturas no array são cefalópodes.

// Verifica se um determinado valor é um cefalópode
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

Como polvo foi a primeira entrada no array a satisfazer o teste na função isCephalopod(), é o primeiro valor a ser retornado.

O método find() pode ajudar você a trabalhar com arrays que contêm muitos valores.

findIndex()

O método findIndex() retorna o primeiro índice em um array que passa em um determinado teste.

Podemos usar o mesmo exemplo de seaCreatures do método find().

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

Usando o teste isCephalopod, encontraremos o número do índice em vez do valor da primeira correspondência.

// Verifica se um determinado valor é um cefalópode
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

polvo é o primeiro item a corresponder ao teste e tem um índice de 1, portanto é o número do índice que é retornado.

Se o teste não for satisfeito, findIndex() irá retornar -1.

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

O método findIndex() é particularmente útil ao trabalhar com arrays contendo muitos itens.

Conclusão

Neste tutorial, revisamos os principais métodos de iteração de arrays integrados em JavaScript. Os métodos de iteração operam em cada item de um array e frequentemente executam uma nova função. Exploramos como percorrer arrays, alterar o valor de cada item em um array, filtrar e reduzir arrays, e encontrar valores e índices.

Para revisar os conceitos básicos de arrays, leia Entendendo Arrays em JavaScript. Para mais informações sobre sintaxe em JavaScript, consulte nosso tutorial sobre “Compreendendo a Sintaxe e Estrutura de Código em JavaScript”.