ECMAScript/ES6函数

精华

小牛编辑

147浏览

2023-03-14

函数是一组输入语句，它们执行特定的计算并产生输出结果。它是在执行特定任务的代码块。当它被调用(或调用)时执行。函数能够以有组织的方式重用和编写代码。 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

1.参数化函数

参数是函数定义中列出的名称，它们是将值传递给函数的机制。参数的值在调用期间传递给函数。除非明确指定，否则传递给函数的值的数量必须与定义的参数数量匹配。

语法

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

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

2.默认函数参数

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

在以下代码中演示如何使用默认值初始化参数：

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

}  
show(100);

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

100 200

如果函数显式传递其值，则参数num2的默认值将被覆盖。可以通过以下示例了解如何使用：

例如

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

执行上面示例代码：

100 500

3.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

注意：reset参数应在函数参数列表的最后位置。

4.返回值函数

该函数还通过使用return语句将值返回给调用方。这样的函数称为返回函数。返回函数应始终以return语句结尾。一个函数中一般只有一个return语句，因为当调用return语句后函数返回退出执行，并且return语句应该是该函数中的最后一条语句。

当JavaScript到达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);

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

执行以上代码后，将获得以下输出结果：

5.生成器函数

生成器(或生成器函数)是ES6中引入的新概念。它提供了一种处理迭代器和函数的新方式。ES6生成器是另一种函数，可以在中间暂停一次或多次，然后可以恢复。

6.匿名函数

匿名函数可以定义为没有名称的函数。匿名函数不与标识符绑定。可以在运行时动态声明它。匿名函数最初创建后无法访问。可以在变量内分配匿名函数。这种表达称为功能表达。匿名函数的语法如下。

语法

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

示例：

var hello = function() {  
   console.log('Hello World');    
   console.log('这是一个匿名函数~');   
}  

hello();

执行上面示例代码，得到以下结果：

Hello World
这是一个匿名函数~

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

Hello World

7.参数化匿名函数

示例：

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

执行上面示例代码，得到以下结果：

Sum: 300

8.箭头函数

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

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

9.函数吊装

如变量吊装，我们也可以执行函数吊装。与变量吊装不同，当吊装函数声明时，它仅吊装函数定义，而不仅仅是吊装函数名称。通过以下示例来说明JavaScript中的函数吊装：
在下面示例中，在编写函数之前先对其进行调用。在编写函数之前调用函数会发生什么。

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

执行上面示例代码，得到以下结果：

Hello world

在上面的代码中，在编写函数之前先调用了函数，但是代码仍然有效。但是，不能吊装函数表达式。在以下是一个吊装函数表达式的示例。

hello();  

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

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

TypeError：hello不是函数

10.函数构造器

这是定义新函数的方式，函数语句不是定义新函数的唯一方法；还可以通过使用Function()构造函数以及new运算符来动态定义函数。它比使用函数表达式或函数语句声明函数效率低。

语法

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

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

使用参数

它的语法包括：

arg1，arg2，…argN：这些是函数用作形式参数的名称，每个参数必须是与JavaScript的有效标识符相对应的字符串。
函数体：它是一个包含JavaScript语句的字符串，其中包含构成函数定义的JavaScript。

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

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

// 创建一个接受两个参数并返回两个参数的乘积的函数。
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

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

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

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

12.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

13.函数表达式与函数声明

两者之间的根本区别在于，函数声明是在执行之前进行解析的，而函数表达式只有在脚本引擎在执行过程中遇到它时才进行解析。与函数声明不同，JavaScript中的函数表达式不会吊装。在定义函数表达式之前，不能使用它们。

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