Os métodos que serão vistos hoje possuem como finalidade reduzir os valores do "array" para um único valor, onde todos os elementos são percorridos para podermos realizar algum processamento.
reduce
Reduzir um "array" para um único valor acumulado, esse método não altera o valor original do "array", a função desse método pode ter quatro parâmetros, sendo eles o valor acumulado, o item atual, o índice e o próprio "array". Além da função é possível passar outro parâmetro para o método, que representa o valor inicial para a redução, no exemplo abaixo faremos a redução de um "array" de números e outro de texto:
Exemplo com números
var numeros = [1,2,3,4,5];
var reduceNum = numeros.reduce(function(acumulado, item, index, array) {
return acumulado + item;
}, 0);
O resultado será 15, pois ocorre uma soma conforme o quadro abaixo:
Iteração | Acumulado | Item | Resultado (novo acumulado) |
---|---|---|---|
1 | 0 | 1 | 1 |
2 | 1 | 2 | 3 |
3 | 3 | 3 | 6 |
4 | 6 | 4 | 10 |
5 | 10 | 5 | 15 |
Exemplo com texto
var texto = ['T', 'e', 'r', 'e', 's', 'a'];
var reduceTxt = texto.reduce(function(acumulado, item, index, array) {
return acumulado + item;
}, 'Nome: ');
O resultado será 'Nome: Teresa', pois ocorre uma concatenação conforme o quadro abaixo:
Iteração | Acumulado | Item | Resultado (novo acumulado) |
---|---|---|---|
1 | 'Nome: ' | 'T' | 'Nome: T' |
2 | 'Nome: T' | 'e' | 'Nome: Te' |
3 | 'Nome: Te' | 'r' | 'Nome: Ter' |
4 | 'Nome: Ter' | 'e' | 'Nome: Tere' |
5 | 'Nome: Tere' | 's' | 'Nome: Teres' |
6 | 'Nome: Teres' | 'a' | 'Nome: Teresa' |
reduceRight
Realiza a mesma coisa que o "reduce", porém sua execução é da direita para a esquerda:
Exemplo com números
var numeros = [1,2,3,4,5];
var reduceNum = numeros.reduceRight(function(acumulado, item, index, array) {
return acumulado + item;
}, 0);
O resultado será 15, pois segue a mesma ideia do exemplo com números de "reduce" acima:
O resultado será 'Nome: asereT', pois segue a mesma ideia do exemplo com texto de "reduce" acima, porém a concatenação ocorre da direita para a esquerda:
Exemplo com texto
var texto = ['T', 'e', 'r', 'e', 's', 'a'];
var reduceTxt = texto.reduceRight(function(acumulado, item, index, array) {
return acumulado + item;
}, 'Nome: ');
O resultado será 'Nome: asereT', pois segue a mesma ideia do exemplo com texto de "reduce" acima, porém a concatenação ocorre da direita para a esquerda: