Javascript 简明教程
JavaScript - Arrow Functions
Arrow Functions
JavaScript 中的 arrow functions 允许我们创建更短的 anonymous 函数。箭头函数被编写为不带 "function" 关键字。JavaScript 箭头函数是在 ES6 中引入的。
在 ES6 之前，我们可以使用函数声明或函数表达式定义 JavaScript 函数。函数表达式用于定义匿名函数。箭头函数允许我们使用更短的语法编写函数表达式。
让我们看看下面的语法来编写函数表达式 −
const varName = function(parameters) {
// function body
};上面的函数表达式可以被写成箭头函数 −
const varName = (parameters) => {
// function body
};这里移除了 "function" 关键字，并且在括号后面添加了 "⇒"。
Arrow Function with Single Statement
当箭头函数包含一个语句时，我们不需要编写 'return' 关键字和大括号。
const add = (x, y) => x +y;请注意，我们总是可以使用 return 关键字和大括号来编写一个箭头函数。
const add = (x, y) => {return x + y};Example
在下面的示例中，箭头函数包含多条语句，因此我们需要使用大括号或 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 语句。
Arrow Functions Without Parameters
上述语法中的参数 p1、p2、……、pN 是可选的。我们可以编写没有参数的箭头函数。
const greet = () => "Hello World!";我们还可以使用大括号和 return 关键字编写代码块：
const greet = () => {return "Hello World!";};Arrow Function with Parameters
Example: Arrow function with a single parameter
以下代码演示了当需要将一个参数传递给函数时，不需要在圆括号中编写参数。
<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: 10Example: Arrow function with multiple parameters
我们在下面的代码中将多个参数传递给箭头函数表达式。当箭头函数的主体包含多条语句时，我们需要将其写在花括号内并使用 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: 145Arrow Function as an Expression
由于箭头函数的语法较短，因此它可以很容易地用作一个表达式。
Example
在下面的代码中，我们使用了三元运算符，并根据 '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: 25Arrow Function with Default Parameters
Example
下面的代码解释了程序员如何将默认参数传递给箭头函数。它类似于我们将默认参数传递给标准函数定义的方式。
<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