如何在 JavaScript 中將函式賦值給變數?


在本教程中,我們將學習如何在 JavaScript 中將函式賦值給變數。函式是可以快速重複使用的程式碼塊,通常只需進行函式呼叫即可。在 JavaScript 中宣告函式有兩種方式,一種是命名函式,另一種是匿名函式。

大多數 JavaScript 程式設計師都熟悉命名函式,使用者可以按照以下語法宣告命名函式。

function function_name() { //function body }

在以上語法中,使用者可以看到,我們可以使用 function 關鍵字以及隨後的函式名稱來建立一個函式定義。

現在,如果我們想將整個函式作為表示式賦值給變數,該怎麼辦?這裡,我們有兩種不同的方法來實現我們的目標。

  • 建立匿名函式

  • 建立箭頭函式

建立匿名函式

**匿名**函式名稱表明我們在宣告函式時沒有指定其標識,即其名稱。

這是將函式賦值給變數的第一種方法。

建立匿名函式作為表示式執行,並在程式碼執行到達函式行時編譯,而命名函式在程式碼執行開始時編譯。

語法

程式設計師可以按照以下語法將匿名函式繫結到變數。

var a = function ( parameters ) {
   // code to be executed
}

在以上語法中,使用者可以看到,我們已將匿名函式的表示式**賦值**給變數“a”。此外,我們可以使用變數“a”呼叫函式並傳遞引數。

示例

在以下示例中,我們將建立一個匿名函式並將其作為表示式賦值給變數。之後,我們將使用變數呼叫匿名函式。此外,我們將學習如何在匿名函式內部傳遞引數。

<!DOCTYPE html>
<html>
<body>
   <h2> JavaScript Anonymous Functions. </h2>
   <p> We could assign the function to a variable</p>
   <div id="func"></div>
   <div id="demo"></div>
   <script>
      var a = function ( x, y ) {
         return x + y;
      }
      let result = a(3, 5);
      document.getElementById("func").innerHTML = "var a = " + a
      document.getElementById("demo").innerHTML = "a(3, 5) = " + result;
   </script>
</body>
</html>

在以上輸出中,使用者可以看到,它呈現了使用變數“a”呼叫函式返回的結果。

建立箭頭函式

將函式賦值給變數的**第二種方法**是箭頭函式。它與上述方法類似,但區別在於我們將建立一個不使用“function”關鍵字的匿名函式,並使用箭頭代替。

箭頭函式是 JavaScript 中宣告函式的最簡短語法,它使程式設計師編寫函式的任務變得更加容易。它是 ES6 中引入的匿名函式的最新版本。

程式設計師可以使用**var、let 或 const**關鍵字建立一個單個變數,並將函式表示式賦值給它。但是,建議使用**const**關鍵字建立變數來賦值函式,因為函式表示式始終保持不變。

語法

使用者可以按照以下語法編寫箭頭函式的表示式。

const variable = ( …parameters ) => {
   // function body
}
Variable( parameters ); // invoke the arrow function.

在以上語法中,使用者可以看到我們如何在不使用 function 關鍵字的情況下宣告箭頭函式表示式。

示例

在以下示例中,我們將建立帶有引數的箭頭函式。此外,我們將將其賦值給變數並透過變數呼叫。

<html>
<body>
   <h2> JavaScript Arrow Functions. </h2>
   <div>
   <p> We assign arrow function to a variable func.</p>
   <p id="demo1"> </p>
   <p id="demo2"> </p>
   </div>
   <script>
      let demoOutput = document.getElementById("demo1");
      const func = (x, y, z) => {
         return x + y + z;
      }
      let result = func(10, 502, 340);
      document.getElementById("demo1").innerHTML = "const func =" + func;
      document.getElementById("demo2").innerHTML = "func( 10, 502, 340 ) =" + result;
   </script>
</body>
</html>

在以上輸出中,使用者可以看到,當我們使用變數呼叫它時,它會列印箭頭函式返回的任何結果。

結論

我們學習了將函式表示式賦值給變數的兩種不同方法。第一種方法是使用匿名函式,這在 ES5 中也是可行的。在 ES6 中,引入了箭頭函式來建立匿名函式並將其賦值給變數。

建議使用箭頭函式,因為它比匿名函式更簡潔。

更新於: 2022年7月14日

24K+ 瀏覽量

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告