JavaScript - 箭头函数

箭头(Arrow )函数

JavaScript 中的 箭头(Arrow )函数 允许我们创建一个更短的匿名函数。箭头函数在编写时没有 “function” 关键字。JavaScript 箭头函数是在 ES6 中引入的。

在 ES6 之前，我们可以使用函数声明或函数表达式来定义 JavaScript 函数。函数表达式用于定义匿名函数。箭头函数允许我们用更短的语法编写函数表达式。

让我们看看下面的语法来编写函数表达式 -

const varName = function(parameters) {
	 	 // function body
};

上面的函数表达式可以写成箭头函数 -

const varName = (parameters) => {
	 	 // function body
};

这里删除了 “function” 关键字，在括号后添加了 “=>”。

语法

在 JavaScript 中使用箭头函数的语法如下。

const varName = (p1, p2, ... pN) => Expression;
OR
const varName = (p1, p2, ...pN) => {
	 	 // function body
};

这里的参数 p1， p2， ...， pN 是可选的。我们可以使用变量名称后跟一对括号来调用 arrow 函数。

带单个语句的箭头函数

当箭头函数包含单个语句时，我们不需要编写 'return' 关键字和大括号（大括号）。

 const add = (x, y) => x +y;

请注意，我们总是可以编写带有 return 关键字和大括号的箭头函数。

 const add = (x, y) => {return x + y};

例

在下面的示例中，arrow 函数包含一个语句，因此我们不需要使用大括号或 return 语句。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const divide = (x, y) => x / y;
	 	 	 document.getElementById("output").innerHTML = divide(10, 5);
	 	</script>
</body>
</html>

输出

具有多个语句的箭头函数

当函数体包含多个语句时，我们应该始终使用 'return' 语句来返回一个值。此外，我们应该使用大括号。

例

在下面的示例中，arrow 函数包含多个语句，因此我们需要使用大括号或 return 语句。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const divide = (x, y) => {
	 	 	 	 	let res = x / y;
	 	 	 	 	return res;
	 	 	 };
	 	 	 document.getElementById("output").innerHTML = divide(10, 5);
	 	</script>
</body>
</html>

输出

注意，当我们使用带大括号的块体时，必须使用 return 语句。

无参数的箭头函数

上述语法中的参数 p1， p2， ...， pN 是选项。我们可以编写一个不带任何参数的箭头函数。

 const greet = () => "Hello World!";

我们也可以使用大括号编写块体并返回关键字 -

 const greet = () => {return "Hello World!";};

例

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const greet = () => "Hello World!";
	 	 	 document.getElementById("output").innerHTML = greet();
	 	</script>
</body>
</html>

输出

Hello World!

带参数的箭头函数

示例：具有单个参数的 Arrow 函数

下面的代码演示了当需要将单个参数传递给函数时，无需在括号中编写参数。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const divide = x => 20 / x;
	 	 	 let res = divide(2);
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "The value returned from the arrow function is: " + res;
	 	</script>
</body>
</html>

输出

The value returned from the arrow function is: 10

示例：具有多个参数的 Arrow 函数

我们将多个参数传递给下面代码中的箭头函数表达式。当 arrow 函数的 body 包含多个语句时，我们需要将其写在花括号内，并使用 return 语句返回值。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const sum = (a, b, c, d) => {
	 	 	 	 	let sum = a + b + c + d;
	 	 	 	 	 	 return sum;
	 	 	 };
	 	 	 let res = sum(10, 30, 45, 60);
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "The sum of 10, 30, 45, and 60 is: " + res;
	 	</script>
</body>
</html>

输出

The sum of 10, 30, 45, and 60 is: 145

箭头函数作为表达式

由于 arrow 函数的语法较短，因此可以很容易地用作表达式。

例

在下面的代码中，我们使用三元运算符，并根据 'isMul' 变量的布尔值，我们将箭头函数表达式分配给 'func' 变量。

之后，我们使用 'func' 变量来调用存储在其中的箭头函数。

<html>
<body>
	 	<p id="output"> </p>
	 	<script>
	 	 	 let isMul = true;
	 	 	 const func = isMul ? () => {
	 	 	 	 	let res = 5 * 5;
	 	 	 	 	document.getElementById("output").innerHTML +=
		 			 	 "The multiplication value is: " + res + "<br>";
	 	 	 } : () => {
	 	 	 	 	let res = 5 + 5;
	 	 	 	 	document.getElementById("output").innerHTML +=
	 	 	 	 	"The sum value is: " + res + "<br>";
	 	 	 };

	 	 	 func();
	 	</script>
</body>
</html>

输出

The multiplication value is: 25

具有默认参数的箭头函数

例

下面的代码解释了程序员如何将默认参数传递给 arrow 函数。这类似于我们将 default 参数传递给标准函数定义。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const output = document.getElementById("output");
	 	 	 let isMul = true;
	 	 	 const mul = (a = 10, b = 15) => a * b;
	 	 	 output.innerHTML += "mul(5, 8) = " + mul(5, 8) + "<br>";
	 	 	 output.innerHTML += "mul(6) = " + mul(6) + "<br>";
	 	 	 output.innerHTML += "mul() = " + mul() + "<br>";
	 	</script>
</body>
</html>

输出

mul(5, 8) = 40
mul(6) = 90
mul() = 150

使用箭头函数的好处

在这里，我们解释了使用箭头函数的好处。

更短语法 − 箭头函数减小代码大小以定义函数。
隐式返回 − 要从仅包含单个语句的箭头函数返回表达式的结果值，开发人员无需使用 return 关键字。
易于用作表达式 − 箭头函数可以很容易地用作表达式。

使用箭头函数的限制

箭头函数有一些限制，我们将在下面解释。

No Arguments − 箭头函数不能有 arguments 对象。
No prototype − 箭头函数不能具有 prototype 属性，因为它作为表达式存储在变量中。
No new keyword − 箭头函数不能与 new 关键字一起使用来创建其对象。

<< JavaScript - 自调用函数 JavaScript - 函数调用 >>