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 關鍵字一起使用來建立其物件。

列印頁面