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 desenvolvedores JavaScript trabalharem com arrays. Métodos que modificam o array original são conhecidos como métodos mutadores, e métodos que retornam um novo valor ou representação são conhecidos como métodos acessores.

Há 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 aos loops. Neste tutorial, estaremos focando nos métodos de iteração.

Para obter o máximo deste tutorial, você deve ter alguma familiaridade com a criação, indexação, modificação e iteração através de arrays, o que você pode revisar no tutorial Entendendo Arrays em JavaScript.

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

Compreendendo 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 para executar
}

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 para executar
}

example();

Os parênteses em ambos os casos podem conter parâmetros. Quando há apenas um parâmetro, os parênteses podem ser omitidos, como segue:

var example = parameter1 => {
  // código para executar
}

Ao longo dos exemplos neste tutorial, usaremos 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 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);
})

Uma vez feito isso, receberemos 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 de comprimento 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 usar o método forEach(). Como um método de iteração especificamente destinado ao 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. O 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 o map() para alterar os valores de cada item em um array. Para demonstrar isso, vamos adicionar um s ao final de cada item no array fish para pluralizar cada palavra.

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

pluralFish;

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

A variável original fish não é alterada, 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 dado.

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() reduzirá um array a 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.

O método find() retorna o primeiro valor em uma matriz que passa em um teste dado.

O método find() pode ajudá-lo a trabalhar com matrizes que contêm muitos valores.

Como exemplo, vamos criar uma matriz de criaturas marinhas.

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

Em seguida, usaremos o método find() para testar se alguma das criaturas na matriz são cefalópodes.

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

seaCreatures.find(isCephalopod);

Output
octopus

Uma vez que octopus foi a primeira entrada na matriz a satisfazer o teste na função isCephalopod(), é o primeiro valor a ser retornado.

O método find() pode ajudá-lo a trabalhar com matrizes que contêm muitos valores.

O método findIndex() retorna o primeiro índice em uma matriz que passa em um teste dado.

Nós podemos usar o mesmo exemplo seaCreatures do método find().

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

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

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

seaCreatures.findIndex(isCephalopod);

Output
1

octopus é 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 embutidos em JavaScript. Os métodos de iteração operam em cada item de um array e frequentemente executam uma nova função. Passamos por como percorrer arrays, alterar o valor de cada item em um array, filtrar e reduzir arrays, e encontrar valores e índices.

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