Introdução a funções de ordem superior em JavaScript

Por definição, uma função de ordem superior é uma função que, pelo menos, recebe uma ou mais outras funções como argumentos ou retorna outra função como resultado. Neste tutorial, focaremos nas funções padrão da biblioteca como filtragem, mapear e reduzir: veremos quando eles podem ser úteis e como usá -los.

Neste tutorial, você aprenderá:

• O que é uma função de ordem superior.
• Por que podemos usar funções de ordem superior em javascript.
• Como e quando usar o filtro, mapear e reduzir as funções.

O que é uma função de ordem superior ?

Nas funções JavaScript são objetos de primeira classe: Eles podem ser atribuídos a variáveis, passados ​​como argumentos para outras funções ou serem devolvidos por outras funções. O uso de funções de ordem superior é baseado nessas peculiaridades. Definimos uma função de ordem superior como uma função que pelo menos aceita outras funções como seus argumentos ou retorna outra função como resultado. Neste tutorial, focaremos nas funções de biblioteca padrão como filtro, mapa e reduzir.

Neste tutorial, faremos um uso de Funções de seta: Se você quiser saber mais sobre esta nova sintaxe de função, pode verificar este tutorial que publicamos sobre o assunto.

Filtro ou variedade.protótipo.filtro

A primeira função sobre a qual falaremos é filtro, ou, para usar seu nome completo, variedade.protótipo.filtro. Esta função é realmente um método do variedade objeto, e o que faz é muito simples: retorna uma nova matriz composta pelos elementos da matriz original que passam no teste implementado em seu corpo.

Para ficar claro, vamos ver um exemplo. Suponha que tenhamos uma variedade de palavras e queremos "filtrar" palavras compostas por exatamente três letras. Poderíamos obter o que queremos usando um para Loop, escrevendo:

Const Words = ["House", "Pen", "Book", "Computer", "Car"]; const Shortwords = []; // poderíamos usar um estilo C padrão para loop… para (vamos i = 0; i < words.length; i++)  if (words[i].length == 3)  shortWords.push(words[i])   //… or a for… of loop for (let word of words)  if (word.length == 3)  shortWords.push(word);   

Ambos os exemplos acima funcionam, e os dois alcançamos o mesmo resultado. Depois que o código for executado, a matriz "shortwords" terá dois membros: "caneta" e "carro". Você pode notar, no entanto, que especialmente o primeiro exemplo é bastante detalhado. Vamos ver como podemos realizar o mesmo resultado com menos código, usando filtro:

const Shortwords = palavras.filtro ((elemento) => elemento.comprimento == 3);

Obtivemos exatamente o mesmo resultado. Há, no entanto, uma diferença: desta vez, usando também um seta função, escrevemos tudo em apenas uma linha de código!. Aqui está como filtro Trabalhos: ele aceita apenas um argumento "obrigatório" que é outra função, um retorno de chamada.

Esse retorno de chamada, aceita, por sua vez, um argumento que é o elemento da matriz original sendo processada atualmente. Se o elemento passar o teste (neste caso se o comprimento da string for igual a 3), o elemento será inserido na nova matriz.

Mapa ou variedade.protótipo.mapa

O mapa (variedade.protótipo.mapa) método, faz algo diferente. Ele também aceita uma função de retorno de chamada como seu único argumento obrigatório, mas retorna uma nova matriz composta pelos elementos resultantes da aplicação do referido retorno de chamada a todos os elementos da matriz original.

Um exemplo vai esclarecer tudo. Desta vez, suponha que queremos obter uma matriz que deve conter todas as cordas dentro da matriz de "palavras", mas na forma superior. Em apenas uma linha, poderíamos escrever:

Const UpperCasedWords = palavras.mapa ((elemento) => elemento.toupppercase ());

Depois de executar o código acima, a matriz "UpperCasedWords" será:

['House', 'Pen', 'Book', 'Computer', 'Car']

O retorno de chamada aceito como argumento por mapa, tem apenas um argumento obrigatório, que é o elemento da matriz original que está sendo processada. O valor resultante da aplicação do retorno de chamada a cada elemento da matriz original é retornado (lembre -se: funções de seta sem aparelho encaracolado usa retorno implícito) e, assim, adicionado à nova matriz. O resultado, neste caso, é uma nova matriz composta pela versão em caso superior de todos os elementos no original.

Reduzir ou variedade.protótipo.reduzir

O reduzir, ou variedade.protótipo.reduzir O método funciona de uma maneira diferente: aceita um retorno de chamada que leva dois argumentos obrigatórios. O primeiro é o chamado acumulador, e o segundo é o valor atual. Em vez de produzir uma nova matriz, esta função de ordem superior usa o retorno de chamada fornecido, também chamado redutor, para reduzir a matriz para um único valor, que é devolvido. É realmente mais simples do que parece, vamos ver um exemplo básico.

Suponha que tenhamos uma matriz contendo alguns números:

const números = [15, 0.50, 200];

Agora, imagine que queremos obter a soma de todos os números contidos na matriz. Novamente, poderíamos usar um loop, ou, como queremos demonstrar, reduzir, Da seguinte maneira:

Deixe TotalPrice = números.reduzir ((acumulador, currentValue) => acumulador + currentValue);

O reduzir Método, como dito acima, aceita uma função de retorno de chamada que leva dois argumentos obrigatórios. O primeiro é o acumulador: Este argumento acumulará os resultados produzidos sempre que a função de retorno de chamada é chamada. O segundo é valor atual, que representa o elemento atual da matriz original que está sendo processada.

Uma coisa importante a perceber é que, se não houver especificado de outra forma (veremos em um momento como podemos fazê -lo), a primeira vez que a função de retorno de chamada é chamada, o valor do acumulador será o primeiro elemento da matriz. Podemos perceber que simplesmente registrando o valor do acumulador e do valor atual, Cada vez que o retorno de chamada é executado:

Deixe TotalPrice = números.Reduce ((acumulador, currentValue) => Console.log (acumulador, currentValue); Retornar acumulador + currentValue; ); 

A saída do código acima será:

15 0.5 15.5 200 

Como você pode notar, se um valor inicial para o acumulador não é explicitamente fornecido, o primeiro elemento da matriz é usado (15) e, coisa muito importante, o índice do primeiro elemento processado pela matriz, é1, Então, neste caso, o primeiro elemento a ser processado é 0.5 (o segundo).

Se você pensar bem, isso faz sentido: caso contrário, o primeiro elemento da matriz seria contado duas vezes! (Pode valer a pena notar que poderíamos ter especificado manualmente o índice do primeiro elemento da matriz a ser processado, usando o currentIndex argumento opcional do retorno de chamada, fornecendo -o depois valor atual). Como esperado, o valor final de preço total vai ser 215.5:

TotalPrice 215.5 

No exemplo acima, os elementos da matriz original, "números", eram números simples, então Tipos primários em javascript. E se fossem objetos? Suponha que tenhamos uma variedade de objetos, cada um com três propriedades: um nome, um preço e uma moeda de preço:

const itens = [nome: 'livro', preço: 15, moeda: 'eur', name: 'car', preço: 15000, moeda: 'eur', name: 'laptop', preço: 1200 , moeda: 'Eur']; 

O que queremos obter aqui é a soma de todos os preços dos itens. Surge um problema imediatamente: não queremos somar diretamente cada item da matriz, pois neste caso estamos trabalhando com objetos, mas o preço propriedade de cada um. Portanto, devemos usar um parâmetro opcional aceito por reduzir, qual é valor inicial:

Deixe FinalPrice = itens.Reduce ((acumulador, currentValue) => acumulador + currentValue.Preço, 0)

O preço final obtemos, como esperado, é 16215. Se não tivéssemos especificado o valor inicial, Fornecendo -o após a função de retorno de chamada (0), o primeiro elemento da matriz "itens" teria sido usado como o valor inicial para o acumulador. Como este é um objeto, o resultado não teria sido o esperado!

Conclusões

Neste tutorial, aprendemos a saber o que define uma função de ordem superior e por que é possível usá -los em javascript. Também aprendemos a conhecer e usar três funções de ordem superior contidas na biblioteca JavaScript padrão, como filtro, mapa e reduzir. Se você estiver interessado em outros tópicos de JavaScript, pode verificar nossos tutoriais sobre promessas ou funções de seta.

Tutoriais do Linux relacionados:

• Uma introdução à automação, ferramentas e técnicas do Linux
• Mastering Bash Script Loops
• Coisas para instalar no Ubuntu 20.04
• Mint 20: Melhor que o Ubuntu e o Microsoft Windows?
• Coisas para fazer depois de instalar o Ubuntu 20.04 fossa focal linux
• Loops aninhados em scripts de basquete
• Com que frequência você tem que reiniciar seu servidor Linux?
• Tutorial de depuração do GDB para iniciantes
• Manipulando a entrada do usuário em scripts bash
• Como fazer bota dupla kali linux e windows 10