JavaScript Arrow函数可以使您成为更好的开发人员

JavaScript ES6为Web开发领域带来了激动人心的变化。 JavaScript语言的新增加带来了新的可能性。

更流行的变化之一是在JavaScript中增加了箭头功能。箭头函数是一种编写JavaScript函数表达式的新方法，为您提供了两种在应用程序中创建函数的方法。

箭头函数需要一点点调整，如果您是传统JavaScript函数的专家。让我们看看它们是什么，它们如何工作以及如何使您受益。

什么是JavaScript箭头函数？

箭头函数是一种新的实现方法编写JavaScript ES6发行版中包含的函数表达式。它们与您一直在使用的JavaScript函数表达式相似，但规则略有不同。

箭头函数始终是匿名函数，对于 this < / code>，并且语法比传统函数更简单。

这些函数使用新的箭头标记：

=>

如果您曾经在Python中工作过，那么这些函数非常相似到Python Lambda表达式。

这些函数的语法比普通函数更简洁。需要牢记一些新规则：

  • 删除了功能关键字
  • return关键字是可选的
  • 花括号是可选的

    • 需要进行很多小的更改，因此让我们从函数表达式的基本比较开始。

    如何使用箭头函数< /

    箭头功能易于使用。与传统函数表达式并排比较时，理解箭头函数会更容易。

    这里是一个将两个数字相加的函数表达式；首先使用传统的函数方法：

     let addnum = function(num1,num2){    return num1 + num2;};addnum(1,2);>>3

    这是一个非常简单的函数，它带有两个参数并返回总和。

    这里是将表达式更改为箭头函数：

    let addnum = (num1,num2) => { return num1 + num2;};addnum(1,2);>>3

    使用箭头函数的函数语法有很大不同。 function关键字已删除；箭头标记可让JavaScript知道您正在编写函数。

    花括号和return关键字仍然存在。这些是带有箭头功能的可选功能。这是相同功能的更简单示例：

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

    return关键字和花括号现在不见了。剩下的是非常干净的单行函数，几乎是原始函数的一半代码。您只需编写更少的代码即可获得相同的结果。

    箭头功能更多。让我们更深入地学习，以便您更好地了解它们的功能。

    箭头功能功能

    箭头功能具有许多不同的用途和功能。

    箭头函数可以使用一个或多个参数。如果您使用两个或多个参数，则必须将其括在括号中。如果只有一个参数，则无需使用括号。

    let square = x => x * xsquare(2);>>4

    箭头函数可以不带参数使用。如果您在函数中未使用任何参数，则必须使用空括号。

    let helloFunction = () => Console.log("Hello reader!");helloFunction();>>Hello reader!

    像这样的简单函数使用的代码要少得多。想象一下，当您拥有更简单的函数编写方式时，像JavaScript幻灯片这样的复杂项目将变得多么容易。

    此的概念往往是使用JavaScript最棘手的部分。箭头函数使此更易于使用。

    使用箭头函数时， this 将由封闭函数定义。这可能会导致创建嵌套函数时出现问题，并且需要此应用于主函数

    下面是一个流行的示例，它显示了解决方法您必须使用常规函数。

    function Person() {  var that = this; //You have to assign 'this' to a new variable  that.age = 0;  setInterval(function growUp() {    that.age++;  }, 1000);}

    将此的值分配给变量，以使其在您在main内部调用函数时可读功能。这很麻烦，这是使用箭头函数实现此目的的更好方法。

    function Person(){  this.age = 0;  setInterval(() => {    this.age++; // Now you can use 'this' without a new variable declared  }, 1000);}

    尽管它们非常适合函数，但不应将其用于在对象内部创建方法。箭头函数未对此使用正确的作用域。

    这是一个简单的对象，可使用箭头函数在内部创建方法。该方法应在调用时将 toppings 变量减少一。相反，它根本不起作用。

    let pizza = {toppings: 5,removeToppings: () => {     this.toppings--;   }}//A pizza object with 5 toppings>pizza>>{toppings: 5, removeToppings: f}pizza.removeToppings(); //The method will not do anything to the object>pizza>>{toppings: 5, removeToppings: f} //Still has 5 toppings

    使用箭头功能，您可以简化用于数组方法的代码。数组和数组方法是JavaScript中非常重要的部分，因此您会经常使用它们。

    有一些有用的方法，例如 map 方法，该方法可在数组并返回新数组。

    let myArray = [1,2,3,4];myArray.map(function(element){return element + 1;});>> [2,3,4,5]

    这是一个非常简单的函数，它向数组中的每个值加一个。您可以使用箭头功能以更少的代码编写相同的函数。

    let myArray = [1,2,3,4];myArray.map(element => {return element + 1;});>> [2,3,4,5]

    现在更容易阅读。

    箭头功能可用于在JavaScript中创建对象文字。常规函数可以创建它们，但需要更长的时间。

    let createObject = function createName(first,last) {     return {        first: first,        last: last     };};

    您可以使用较少的代码使用箭头函数创建相同的对象。使用箭头表示法，您需要将函数主体包装在括号中。这是带有箭头功能的改进语法。

    let createArrowObject = (first,last) => ({first:first, last:last});

    JavaScript箭头功能及其他

    您现在知道了JavaScript箭头功能使开发人员的生活更轻松的一些不同方式。它们缩短了语法，使用此为您提供了更多控制，使对象更易于创建，并为您提供了一种使用数组方法的新方法。

    JavaScript ES6中箭头功能以及许多其他功能的介绍恰好显示了JavaScript在Web开发中的重要性。您还有很多事情可以做。

    标签: