如何在 JavaScript 中将函数赋值给变量?

front end technologyjavascriptweb development

在本教程中,我们将学习如何在 JavaScript 中将函数赋值给变量。函数是可以快速重用的代码块,通常只需进行函数调用即可。在 JavaScript 中声明函数有两种方式,一种是命名函数,另一种是匿名函数。

大多数 JavaScript 程序员都熟悉命名函数,用户可以按照以下语法声明命名函数。

function function_name() { //function body }

在上述语法中,用户可以看到,我们可以使用 function 关键字和函数名称来创建函数定义。

现在,如果我们想将整个函数作为表达式赋值给变量,该怎么办?这里,我们有两种不同的方法来实现我们的目标。

  • 创建匿名函数

  • 创建箭头函数

创建匿名函数

匿名函数名表明我们在声明函数时没有使用其身份,也就是函数名。

这是将函数分配给变量的第一种方法。

创建匿名函数作为表达式工作,并在代码执行到达函数行时进行编译,命名函数在代码执行开始时进行编译。

语法

程序员可以按照以下语法将匿名函数绑定到变量。

var a = function ( parameters ) {
   // 要执行的代码
}

在上面的语法中,用户可以看到我们已将匿名函数的表达式赋值变量"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 ) => {
   // 函数主体
}
Variable(parameters); // 调用箭头函数。

在上述语法中,用户可以看到我们如何在不使用 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 中,引入了箭头函数来创建匿名函数并将其分配给变量。

建议使用箭头函数,因为它是匿名函数的较短版本。


相关文章