Funções de seta JavaScript podem torná-lo um desenvolvedor melhor

Propaganda

O JavaScript ES6 trouxe mudanças emocionantes para o mundo do desenvolvimento web. Novas adições à linguagem JavaScript trouxeram novas possibilidades.

Uma das mudanças mais populares foi a adição de funções de seta ao JavaScript. As funções de seta são uma nova maneira de escrever expressões de função JavaScript, oferecendo duas maneiras diferentes de criar funções no seu aplicativo.

As funções de seta precisam de um pouco de ajuste se você é especialista em funções JavaScript tradicionais. Vamos dar uma olhada no que são, como eles funcionam e como eles beneficiam você.

O que são funções de seta do JavaScript?

As funções de seta são uma nova maneira de escrever expressões de função que eram incluído no release do JavaScript ES6 O que é o ES6 e o ​​que os programadores Javascript precisam saberES6 refere-se à versão 6 da linguagem de programação ECMA Script (Javascript). Vejamos agora algumas das principais mudanças que o ES6 traz ao JavaScript. consulte Mais informação . Eles são semelhantes às expressões da função JavaScript que você está usando, com algumas regras ligeiramente diferentes.

As funções de seta são sempre funções anônimas, têm regras diferentes para estae tem uma sintaxe mais simples que as funções tradicionais.

Essas funções usam um novo token de seta:

=>

Se você já trabalhou em Python, essas funções são muito semelhantes a Expressões Python Lambda Um guia para iniciantes sobre como entender as funções do Python LambdaLambdas em Python são um dos recursos mais úteis, importantes e interessantes para se conhecer. Veja como usá-los e por que são úteis. consulte Mais informação .

A sintaxe para essas funções é um pouco mais limpa que as funções normais. Há algumas regras novas a serem lembradas:

• A palavra-chave da função é removida
• A palavra-chave return é opcional
• Aparelhos encaracolados são opcionais

Há muitas pequenas mudanças a serem revisadas, então vamos começar com uma comparação básica das expressões de função.

Como usar as funções de seta

As funções de seta são fáceis de usar. Compreender as funções das setas é mais fácil quando comparado lado a lado com as expressões de funções tradicionais.

Aqui está uma expressão de função que adiciona dois números; primeiro usando o método da função tradicional:

 deixe addnum = function (num1, num2) {retorna num1 + num2; }; adição (1,2); >>3

É uma função bastante simples que pega dois argumentos e retorna a soma.

Aqui está a expressão alterada para uma função de seta:

deixe addnum = (num1, num2) => {retornar num1 + num2;}; adição (1,2); >>3

A sintaxe da função é bem diferente usando uma função de seta. A palavra-chave da função é removida; o token de seta informa ao JavaScript que você está escrevendo uma função.

As chaves e a palavra-chave return ainda estão lá. Estes são opcionais com funções de seta. Aqui está um exemplo ainda mais simples da mesma função:

deixe addnum = (num1, num2) => num1 + num2;

A palavra-chave de retorno e as chaves agora não existem mais. O que resta é uma função de linha única muito limpa, que é quase metade do código da função original. Você obtém o mesmo resultado com muito menos código escrito.

Há mais nas funções de seta. vamos nos aprofundar para que você tenha uma ideia melhor do que eles podem fazer.

Seta Função Recursos

As funções de seta têm muitos usos e recursos diferentes incluídos.

Funções regulares

As funções de seta podem usar um ou mais argumentos. Se você estiver usando dois ou mais argumentos, coloque-os entre parênteses. Se você tiver apenas um argumento, não precisará usar parênteses.

Seja quadrado = x => x * x quadrado (2); >>4

As funções de seta podem ser usadas sem argumentos. Se você não estiver usando nenhum argumento em sua função, deverá usar parênteses vazios.

deixe helloFunction = () => Console.log ("Olá leitor!"); helloFunction (); >> Olá leitor!

Funções simples como essas usam muito menos código. Imagine quanto mais fácil um complexo projeto como uma apresentação de slides JavaScript Como criar um SlideShow de JavaScript em 3 etapas fáceisHoje mostrarei como criar uma apresentação de slides Javacript do zero - vamos pular direto! consulte Mais informação torna-se quando você tem uma maneira mais simples de escrever funções.

Usando isto

O conceito de esta tende a ser a parte mais complicada do uso de JavaScript. As funções de seta tornam esta mais fácil de usar.

Quando você usa funções de seta esta será definido pela função anexa. Isso pode criar problemas que surgem quando você cria funções aninhadas e precisa esta para aplicar à sua função principal

Aqui está um exemplo popular que mostra a solução alternativa que você deve usar com funções regulares.

função Person () {var that = this; // Você precisa atribuir 'this' a uma nova variável that.age = 0; setInterval (função growUp () {that.age ++; }, 1000); }

Atribuindo o valor de esta para uma variável torna legível quando você chama uma função dentro da sua função principal. Isso é confuso, aqui está uma maneira melhor de fazer isso usando as funções de seta.

função Person () {this.age = 0; setInterval (() => {this.age ++; // Agora você pode usar 'this' sem uma nova variável declarada}, 1000); }

Embora sejam ótimos para funções, eles não devem ser usados ​​para criar métodos dentro de um objeto. As funções de seta não usam o escopo correto para esta.

Aqui está um objeto simples que cria um método interno usando uma função de seta. O método deve reduzir o coberturas variável por um quando chamado. Em vez disso, não funciona.

deixe pizza = { coberturas: 5, removeToppings: () => {this.toppings--; } } // Um ​​objeto de pizza com 5 coberturas. > pizza. >> {coberturas: 5, removeToppings: f} pizza.removeToppings (); // O método não fará nada com o objeto> pizza. >> {coberturas: 5, removeToppings: f} // Ainda possui 5 coberturas.

Trabalhando com matrizes

Usando as funções de seta, você pode simplificar o código usado para trabalhar com métodos de matriz. Matrizes e métodos de matriz são partes muito importantes do JavaScript 5 métodos de matriz JavaScript que você deve dominar hojeDeseja entender matrizes JavaScript, mas não consegue lidar com elas? Confira nossos exemplos de matriz JavaScript para obter orientação. consulte Mais informação então você vai usá-los bastante.

Existem alguns métodos úteis como o mapa método que executa uma função em todos os elementos de uma matriz e retorna a nova matriz.

deixe myArray = [1,2,3,4]; myArray.map (função (elemento) { elemento de retorno + 1; }); >> [2,3,4,5]

Esta é uma função bastante simples que agrega um a cada valor na matriz. Você pode escrever a mesma função com menos código usando uma função de seta.

deixe myArray = [1,2,3,4]; myArray.map (elemento => { elemento de retorno + 1; }); >> [2,3,4,5]

É muito mais fácil ler agora.

Criando literais de objetos

As funções de seta podem ser usadas para criar literais de objetos em JavaScript. Funções regulares podem criá-las, mas são um pouco mais longas.

deixe createObject = função createName (primeiro, último) {return {primeiro: primeiro, último: último}; };

Você pode criar o mesmo objeto com uma função de seta usando menos código. Usando a notação de seta, você precisará colocar o corpo da função entre parênteses. Aqui está a sintaxe aprimorada com as funções de seta.

deixe createArrowObject = (primeiro, último) => ({primeiro: primeiro, último: último});

Funções da seta JavaScript e além

Agora você conhece algumas maneiras diferentes pelas quais as funções de seta do JavaScript facilitam sua vida como desenvolvedor. Eles diminuem a sintaxe, oferecem mais controle usando esta, facilite a criação de objetos e ofereça uma nova maneira de trabalhar com métodos de matriz.

A introdução das funções de seta, juntamente com muitos outros recursos, no JavaScript ES6 mostra o quão importante o JavaScript se tornou no desenvolvimento da Web. Há muito mais que você pode fazer.

Deseja saber mais sobre JavaScript? Nosso Folha de dicas do JavaScript A Folha de Dicas Ultimate em JavaScriptReceba uma atualização rápida dos elementos JavaScript com esta folha de dicas. consulte Mais informação fornece informações valiosas e aprende mais sobre como o JavaScript funciona O que é JavaScript e como funciona?Se você está aprendendo o desenvolvimento da Web, aqui está o que você precisa saber sobre JavaScript e como ele funciona com HTML e CSS. consulte Mais informação pode torná-lo um desenvolvedor melhor.