javascript箭头函数可以使您成为更好的开发人员

想在web开发方面做得更好吗？添加到JavaScript ES6中的箭头函数提供了两种为web应用创建函数的方法。...

JavaScript ES6为web开发世界带来了激动人心的变化。JavaScript语言的新添加带来了新的可能性。

其中一个比较流行的变化是在JavaScript中添加了箭头函数。箭头函数是编写JavaScript函数表达式的一种新方法，为您在应用程序中创建函数提供了两种不同的方法。

如果您是传统JavaScript函数的专家，则箭头函数需要进行一些调整。让我们看看这些是什么，它们是如何工作的，以及它们对您有何好处。

什么是javascript箭头函数(javascript arrow functi***)？

箭头函数是编写JavaScript ES6版本中包含的函数表达式的新方法。它们与您一直使用的JavaScript函数表达式类似，但有一些稍微不同的规则。

箭头函数始终是匿名函数，具有不同的规则

this

，并具有比传统函数更简单的语法。

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

如果您曾经使用过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

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

大括号和return关键字仍然存在。这些是可选的箭头功能。下面是一个更简单的相同函数示例：

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

return关键字和花括号现在不见了。剩下的是一个非常干净的单行函数，几乎是原始函数代码的一半。用更少的代码就可以得到相同的结果。

还有更多的箭头功能。让我们潜得更深一点，让你更好地感受他们的能力。

箭头功能特性

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

正则函数

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

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

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

let helloFunction = () => C***ole.log("Hello reader!");helloFunction();>>Hello reader!

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

用这个

概念

this

往往是使用JavaScript最棘手的部分。箭头函数使

this

更容易使用。

使用箭头函数时

this

将由封闭函数定义。这可能会在创建嵌套函数和需要时产生问题

this

应用于您的主要功能

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

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

赋值

this

当您在主函数中调用函数时，对变量的调用使其可读。这是混乱的，这里有一个更好的方法来使用箭头函数。

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

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

this

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

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