JavaScript - 箭头函数

箭头函数

JavaScript 中的箭头函数允许我们创建更短且匿名的函数。箭头函数无需使用“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 是可选的。我们可以使用变量名后跟一对括号来调用箭头函数。

单语句箭头函数

当箭头函数包含一个单语句时，我们不需要编写 '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>

输出

多语句箭头函数

当函数体包含多个语句时，我们应该始终使用 '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>

输出

注意，当我们使用花括号使用块体时，必须使用 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 对象。
无原型 - 箭头函数不能有 prototype 属性，因为它作为表达式存储在变量中。
不能使用 new 关键字 - 箭头函数不能与 new 关键字一起使用来创建其对象。

打印页面