📜  ES6函数

📅  最后修改于: 2021-01-01 03:54:35             🧑  作者: Mango

ES6功能

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

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

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

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(),该函数接受两个参数xy,并返回结果的乘积。参数值在调用期间传递给函数。

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参数,参数名称应以具有三个句点(不超过三个或不小于三个)的散布运算符为前缀。

在以下示例中,您可以看到相同的插图:

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

输出量

50,60,70,80,90,100

注意:其余参数应最后位于函数参数列表中。

返回功能

该函数还通过使用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);

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

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

输出量

30

发电机功能

生成器(或Generator 函数)是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 Arrow功能。

功能吊装

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

让我们尝试通过使用以下示例来说明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的任意语句,这些语句之间用分号分隔。

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

// 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中的函数表达式不会提升。在定义函数表达式之前,不能使用它们。

函数声明和函数表达式之间的主要区别是函数,其可以在函数表达式可以省略用于产生匿名功能的名称。