ES6函数介绍和用法示例

本文概述

• 参数化函数
• 默认函数参数
• rest参数
• return函数
• Generators函数
• 匿名函数
• 箭头函数
• 函数提升
• 函数构造器
• 立即调用函数表达式(IIFE)
• JavaScript函数和递归
• 函数表达式与函数声明

函数是一组输入语句, 它们执行特定的计算并产生输出。它是旨在执行特定任务的代码块。当它被调用(或调用)时执行。函数使我们能够以有组织的方式重用和编写代码。 JavaScript中的函数用于执行操作。

在JavaScript中, 通过使用function关键字后跟名称和括号()来定义函数。函数名称可以包括数字, 字母, 美元符号和下划线。函数名称中的方括号可能包含用逗号分隔的参数名称。函数的主体应放在花括号{}中。

定义标准函数的语法如下：

function function_name() {
	//body of the function
}

要强制执行该函数, 我们必须调用(或调用)该函数。这被称为函数调用。调用函数的语法如下：

function_name()

例子

function hello() //defining a function
{
   console.log ("hello function called");
   }
hello(); //calling of function

在上面的代码中, 我们定义了一个函数hello()。一对括号{}定义函数的主体, 称为函数范围。

输出如下

hello function called

让我们尝试了解不同的函数。

参数化函数

参数是函数定义中列出的名称。它们是将值传递给函数的机制。

参数的值在调用期间传递给函数。除非明确指定, 否则传递给函数的值的数量必须与定义的参数数量匹配。

语法

定义参数化函数的语法为：

function function_name( parameter1, parameter2 , …..parameterN) {   
   	 //body of the function
}

例子

在此参数化函数示例中, 我们定义了一个函数mul(), 该函数接受两个参数x和y, 并返回结果的乘积。参数值在调用期间传递给函数。

function mul( x , y) { 
    var c = x * y;
    console.log("x = "+x);
    console.log("y = "+y);
    console.log("x * y = "+c); 
 } 
mul(20, 30);

输出如下

x = 20
y = 30
x * y = 600

默认函数参数

在ES6中, 如果未定义参数或未向其传递任何值, 则该函数允许使用默认值初始化参数。

你可以在以下代码中看到相同的插图：

例如

function show (num1, num2=200) 
{
    console.log("num1 = " +num1);
    console.log("num2 = " +num2);

}
show(100);

在上述函数中, 默认将num2的值设置为200。如果未显式传递num2的值, 则该函数将始终将200视为num2的值。

输出如下

100 200

如果函数显式传递其值, 则参数’num2’的默认值将被覆盖。你可以通过以下示例了解它：

例如

function show(num1, num2=200) 
{
    console.log("num1 = " +num1);
    console.log("num2 = " +num2);
}
show(100, 500);

输出如下

100 500

rest参数

rest参数不限制你传递函数中值的数量, 但所有传递的值必须具有相同的类型。我们也可以说rest参数充当相同类型的多个参数的占位符。

为了声明rest参数, 参数名称应以具有三个句点(不超过三个或不小于三个)的散布运算符为前缀。

在以下示例中, 你可以看到相同的插图：

function show(a, ...args)
{
    console.log(a + " " + args);
}
show(50, 60, 70, 80, 90, 100);

输出如下

50, 60, 70, 80, 90, 100

注意：rest参数应最后位于函数参数列表中。

return函数

该函数还通过使用return语句将值返回给调用方。这些函数称为return函数。return函数应始终以return语句结尾。一个函数中只能有一个return语句, 并且return语句应该是该函数中的最后一条语句。

当JavaScript到达return语句时, 该函数将停止执行并立即退出。因此, 你可以使用return语句立即停止执行该函数。

语法

函数可以使用return语句后跟一个值或表达式来返回该值。return函数的语法如下：

function function_name() { 
    //code to be executed
    return value; 
}

例子

function add( a, b )
{
    return a+b;
}
var sum = add(10, 20);
console.log(sum);

在上面的示例中, 我们定义了具有两个参数a和b的函数add()。此函数将参数的附加值返回给调用方。

执行以上代码后, 你将获得以下输出。

输出如下

30

Generators函数

生成器(或生成器函数)是ES6中引入的新概念。它为你提供了一种处理迭代器和函数的新方式。

ES6生成器是另一种函数, 可以在中间暂停一次或多次, 然后可以恢复。

你可以通过单击此链接ES6 Generators了解有关生成器函数的更多信息。

匿名函数

匿名函数可以定义为不带名称的函数。匿名函数不与标识符绑定。可以在运行时动态声明它。匿名函数最初创建后无法访问。

可以在变量内分配匿名函数。这种表达称为函数表达。匿名函数的语法如下。

语法

var y = function( [arguments] ) 
{ 
     //code to be executed
}

例子

var hello = function() {
   console.log('Hello World');  
   console.log('I am an anonymous function'); 
 }
 hello();

输出如下

Hello World
I am an anonymous function

匿名函数作为参数

匿名函数的一种常见用法是可以将其用作其他函数的参数。

例子

用作其他函数的参数。

setTimeout(function() 
{
   console.log('Hello World');
 }, 2000);

当你执行上述代码时, 它将在两秒钟后显示输出。

输出如下

Hello World

参数化匿名函数

例子

var anon = function(a, b)
{ 
   return a+b 
}
function sum() { 
   var res; 
   res = anon(100, 200); 
   console.log("Sum: "+res)  
} 
sum()

输出如下

Sum: 300

箭头函数

ES6中引入了Arrow函数, 它为你提供了一种更准确的JavaScript编写方法。它们使我们能够编写较小的函数语法。箭头函数使你的代码更具可读性和结构性。

单击此链接ES6箭头函数, 可以了解有关箭头函数的更多信息。

函数提升

作为变量提升, 我们可以执行函数提升。与变量提升不同, 当函数声明被提升时, 它仅提升函数定义, 而不仅仅是提升函数名称。

让我们尝试使用以下示例来说明JavaScript中的函数提升：

例子

在此示例中, 我们在编写函数之前先对其进行调用。让我们看看在编写函数之前调用函数会发生什么。

hello();
function hello() {
  console.log("Hello world ");
}

输出如下

Hello world

在上面的代码中, 我们在编写函数之前先调用了该函数, 但是该代码仍然有效。

但是, 不能悬挂函数表达式。让我们尝试在以下示例中查看提升函数表达式的图示。

hello();

var hello = function() {
  console.log("Hello world ");
}

当你执行上述代码时, 你将收到” TypeError：hello不是函数”。发生这种情况是因为无法悬挂函数表达式。

输出如下

TypeError: hello is not a function

函数构造器

这是定义新函数的方式。函数语句不是定义新函数的唯一方法；我们还可以通过使用Function()构造函数以及new运算符来动态定义函数。

它比使用函数表达式或函数语句声明函数效率低。

语法

使用Function()构造函数创建函数的语法。

var variable_name = new Function(arg1, arg2..., "Body of the Function");

使用参数

它的语法包括：

arg1, arg2, …argN：这些是函数用作形式参数的名称。每个参数必须是与JavaScript的有效标识符相对应的字符串。

函数体：它是一个包含JavaScript语句的字符串, 其中包含构成函数定义的JavaScript。

它可以包含任意数量的字符串参数。最后一个参数是函数的主体, 它可以包含JavaScript的任意语句, 这些语句之间用分号分隔。

function()构造函数不会传递任何为其创建的函数指定名称的参数。

例子

// creating a function that takes two arguments and returns the product of both arguments
var mul = new Function('a', 'b', 'return a * b');

// calling of function
console.log("The product of the numbers is: " +mul(5, 5));

输出如下

The product of the numbers is: 25

立即调用函数表达式(IIFE)

它是JavaScript中的一个函数, 它在定义后立即运行。可以使用IIFE(立即调用函数表达式)来避免从块内部进行变量提升。它允许公众访问方法, 同时保留函数中定义的变量的私密性。

你可以通过单击此链接来了解有关IIFE的更多信息, 立即调用函数表达式(IIFE)

JavaScript函数和递归

当函数调用自身时, 它称为递归函数。递归是一种通过重复调用函数直到其达到结果来迭代操作的技术。

这是当我们需要在循环中定期调用具有不同参数的同一函数时的最佳方法。

例子

function fact(num) {
      if (num <= 1) {
          return 1;
      } else {
          return num * fact(num - 1);
      }
  } 
  console.log(fact(6));
  console.log(fact(5));
  console.log(fact(4));

输出如下

720
120
24

函数表达式与函数声明

两者之间的根本区别在于, 函数声明是在执行之前进行解析的, 但是仅在脚本引擎在执行过程中遇到函数声明时才对函数表达式进行解析。

与函数声明不同, JavaScript中的函数表达式不会提升。在定义函数表达式之前, 不能使用它们。

函数声明和函数表达式之间的主要区别在于函数的名称, 可以在创建匿名函数的函数表达式中将其省略。