JavaScript 中的箭头函数允许我们创建更短和匿名的函数。箭头函数不使用 function
关键字来书写。箭头函数是在 ES6 中引入的特性。
在 ES6 之前,我们可以使用函数声明或函数表达式来定义 JavaScript 函数。函数表达式用于定义匿名函数。箭头函数允许我们以更短的语法来编写函数表达式。
让我们看下面的语法来写出一个函数表达式:
const varName = function(parameters) {
};
上述函数表达式可以写成箭头函数的形式:
const varName = (parameters) => {
};
在这里,function
关键字被移除了,并且在括号后加上了 =>
。
语法
使用 JavaScript 中的箭头函数的语法如下:
const varName = (p1, p2, ... pN) => Expression;
或者
const varName = (p1, p2, ...pN) => {
};
这里的参数 p1, p2, ..., pN
是可选的。我们可以使用变量名后面跟着一对括号来调用箭头函数。
包含单个语句的箭头函数
当箭头函数包含一个单一语句时,我们不需要写 return
关键字和花括号。
const add = (x, y) => x + y;
请注意,我们总是可以写出带有 return
关键字和花括号的箭头函数。
const add = (x, y) => {return x + y};
示例
在下面的例子中,箭头函数包含一个单一语句,所以我们不需要使用花括号或 return
语句。
<html>
<body>
<p id = "output"> </p>
<script>
const divide = (x, y) => x / y;
document.getElementById("output").innerHTML = divide(10, 5);
</script>
</body>
</html>
输出
2
包含多个语句的箭头函数
当函数体包含多个语句时,我们应该始终使用 return
语句来返回一个值。同时我们也应该使用花括号。
示例
在下面的例子中,箭头函数包含多个语句,所以我们需要使用花括号或 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>
输出
2
注意,当我们使用带有花括号的块体时,我们必须使用 return
语句。
没有参数的箭头函数
上面的语法中的参数 p1, p2, ..., pN
是可选的。我们可以写出没有任何参数的箭头函数。
const greet = () => "Hello World!";
我们也可以使用带有花括号和 return
关键字的块体来写出它:
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!
带参数的箭头函数
示例:带单个参数的箭头函数
下面的代码演示了当你需要传递单个参数给函数时,你不需要将参数写在括号对内。
<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
示例:带多个参数的箭头函数
我们在下面的代码中向箭头函数表达式传递了多个参数。当箭头函数的体包含多个语句时,我们需要将其写在花括号内,并使用 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
作为表达式的箭头函数
由于其更短的语法,箭头函数可以很容易地作为表达式来使用。
示例
在下面的代码中,我们使用了三元运算符,并根据 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
带默认参数的箭头函数
示例
下面的代码解释了程序员如何向箭头函数传递默认参数。这与我们向标准函数定义传递默认参数的方式类似。
<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
关键字来返回表达式的计算结果。
-
作为表达式使用方便:箭头函数可以很容易地作为表达式来使用。
使用箭头函数的局限性
-
没有
arguments
对象:箭头函数不能拥有 arguments
对象。
-
没有原型:箭头函数不能拥有原型属性,因为它作为一个表达式存储在变量中。
-
不能使用
new
关键字:箭头函数不能使用 new
关键字来创建它的对象。