Uso de funções de seta em JavaScript

Uma função de seta em JavaScript é uma alternativa mais concisa a uma função tradicional. A sintaxe permite a criação rápida de funções inline anônimas.

As funções de seta foram adicionadas ao ES6 em 2015. Elas agora são suportadas por todos os principais navegadores. Você pode usá-los com navegadores mais antigos, como o Internet Explorer, por meio de um transpilador como o Babel .

índice

  1. Criando funções de seta
  2. Gerenciamento de temas
  3. Usar literais de objeto
  4. Valores de retorno
  5. link lexical
  6. Características
  7. Conclusão

Criando funções de seta

A principal vantagem das funções de seta é o quão conciso elas tornam seu código.

Aqui está uma função tradicional:

 função quadrado ( x ) { return ( x * x ) ; }

Aqui está o mesmo código reescrito como uma função de seta:

 const quadrado = x => ( x * x );

Eles são chamados de "funções de seta" por causa da sintaxe de seta " => ".

As funções de seta são especialmente úteis ao trabalhar com retornos de chamada.

Aqui está a versão tradicional:

 function getNonEmptyStrings ( arr ) { return arr. filtro(função(i){retorno(i. comprimento > 0); }); }

E aqui está a função interna como uma função de seta:

 function getNonEmptyStrings ( arr ) { return arr. filtro (i => (i.comprimento > 0)); }

As funções das setas são muito mais curtas do que suas contrapartes tradicionais. Você pode omitir o prefixo do arquivo de function . Eles permitem instruções limpas de uma linha e têm uma instrução de return .

Gerenciamento de temas

As funções de seta aceitam diferentes formas de argumentos:

 const noArgs = ( ) => alert( "Não tenho argumentos" ); const oneArg = arg => alert( `Meu argumento é ${ arg } ` ) ; const multipleArgs = ( arg1 , arg2 ) => alert( `Args : $ { arg1 } $ { arg2 } ` ) ;

Quando um único argumento é usado, os parênteses não são necessários. Quando houver vários argumentos, use parênteses e vírgulas no mesmo estilo de uma declaração de função clássica. As funções de seta que não aceitam argumentos requerem um par de parênteses vazios, portanto, a sintaxe é válida.

Usar literais de objeto

Você pode retornar literais de objeto de funções de seta embutidas, mas elas devem ser colocadas entre parênteses. Este é um requisito do analisador.

 const func = ( ) => ( { foo : "bar" } );

Você pode desconstruir um literal de objeto em argumentos usando a mesma forma entre parênteses:

 const func = ( { foo } ) => foo ; // func({foo: "bar"}) retorna "bar"

A omissão dos parênteses cria um erro de sintaxe em ambos os casos.

Valores de retorno

Todos os nossos exemplos até agora foram funções de linha única com uma instrução de return implícita.

Você pode escrever funções de seta que abrangem várias linhas:

 function getNonEmptyStrings ( arr ) { return arr. filter ( i => { const aparado = i. trim() ; const substituído = aparado. replace ( /[^A-Za-z]/g , "" ); return ( substituído. comprimento > 0 ); } ); }

Ao escrever uma função de seta de várias linhas, coloque seu bloco de corpo entre parênteses da mesma forma que faria com uma função tradicional. Um retorno padrão não pode ser usado; você precisa retornar a uma instrução de return de arquivo.

link lexical

Além da sintaxe, a presença de ligação léxica é uma das principais diferenças entre funções de seta e expressões de funções clássicas.

Uma função tradicional tem this significado para se referir a si mesma. As funções de seta são sempre anônimas. this está associado ao mesmo valor que this dentro do bloco que define a função de seta.

 class Exemplo { construtor ( ) { this . demo = "foobar" ; } classic (arr) { return arr. filter(function(a) { return(a === this.demo); }); } seta ( arr ) { return arr. filter(a =>(a === this.demo)); } } const ex = new Exemplo(); // não corresponde a ex. classic(["foobar"]); // corresponde a ex. seta(["foobar"]);

A capacidade das funções de seta de usar a extensão this do escopo principal significa que você não precisa usar bind() ao usá-las na sala de aula. Combinado com a sintaxe do terser, isso torna as funções de seta a maneira ideal de escrever retornos de chamada. Eles são melhores em cenários descartáveis ​​onde o contexto externo é mais importante do que a identidade da função.

Como resultado da associação léxica, as funções de seta não devem ser usadas com funções call , apply é bind . Essas funções são usadas para executar uma função dentro de um escopo específico. Eles não são relevantes para funções de seta, pois this sempre será definido no escopo em que a expressão é definida.

Características

As funções de seta têm uma extensão algumas outras diferenças além da function explicitamente definida Expressões

As funções de seta não têm constructor , então você não pode instanciá-las com a palavra-chave new . Eles nem têm um protótipo: a propriedade prototype será undefined .

Ao contrário das funções normais, você não pode usar a extensão de arguments de variável local. Sara undefined . Os valores dos argumentos devem ser acessados ​​diretamente pelo nome.

O uso de uma função de seta como um arquivo Generator não é suportado. Tentar usar a palavra-chave yield no corpo de uma função de seta gerará um erro.

Uma última coisa a ter em mente é a ordem de análise. As funções de seta recebem tratamento exclusivo em expressões condicionais, portanto, observe o resultado nos seguintes cenários:

 valor const = falso; //Função tradicional; tudo OK deixe resultado = ( valor || função ( ) { } ) ; // Função de seta - lança um `SyntaxError` let result = ( value || ( ) => null ); // Função seta; tudo OK deixe resultado = ( valor || ( ( ) => null ) );

Ao criar uma função de seta em uma expressão condicional, coloque-a entre parênteses para garantir que ela seja avaliada corretamente. Algumas das regras de precedência do operador substituem, conforme ilustrado no segundo exemplo.

Conclusão

O uso de funções de seta torna o código mais conciso e reduz a repetição. Seus atributos, incluindo anonimato e vinculação léxica, simplificam bastante cenários como retornos de chamada. Ao mesmo tempo, esses mesmos atributos significam que eles não são um substituto imediato para todos os recursos tradicionais.

Apesar de suas limitações, alguns desenvolvedores de JavaScript acreditam que as funções de seta podem tornar o código menos legível e mais difícil de manter. A completa falta de palavras-chave, como function is return , permite que você perca a presença delas ao percorrer o código. A sintaxe é mais opaca para novos desenvolvedores que podem não estar totalmente cientes de suas idiossincrasias.

Portanto, é uma boa ideia pensar em como usar as funções de seta em sua base de código. Isso geralmente significa escrever retornos de chamada em forma de seta, mantendo a sintaxe alternativa para funções de tecla de nível superior.

  • Como usar tabelas dinâmicas para analisar dados do Excel
  • Como configurar seu site facilmente

descubra mais conteúdo

O que é um amplificador integrado?

Google Pixel Watch também tem detecção de queda, mas não até o próximo ano

As melhores xícaras de café aquecidas de 2022

Como automatizar seu iPhone com base na hora, atividade ou localização

"Isso deve ter sido antes do meu tempo"

Por que a NASA enviou Snoopy para a Lua? – Revisão Geek

Deixe uma resposta Cancelar resposta

O que a função de seta faz em JavaScript?

Uma expressão de função de seta é uma alternativa compacta a uma expressão de função tradicional, mas é limitada e não pode ser usada em todas as situações. Diferenças e limitações: Não possui this ou super bindings próprios e não deve ser usado como método. Não possui novos argumentos ou palavras-chave. 6 dias atrás

Como funciona uma função de seta?

As funções de seta são uma nova maneira de definir funções e existem várias variações na sintaxe: Função de parâmetro único . chaves, isso pode ser feito quando a função é

Ir arriba