ES6 动画

ES6 函数

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

在 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 ,&#x2026;..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

注意 :其余参数应该在函数参数列表的最后。

返回函数

函数也返回使用 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。此函数将添加的参数返回给调用者。

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

输出

30

生成器函数

生成器(或生成器函数)是 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 中引入的，它为您提供了一种更准确的 JavaScript 编写函数的方式。它们允许我们编写更小的函数语法。箭头函数使您的代码更具可读性和结构化。

您可以通过单击此链接的更多信息。 com/es6-arrow-function">ES6 箭头函数.

函数提升

作为变量提升，我们可以在函数中进行提升。与变量提升不同，当函数声明被提升时，它只提升函数定义而不是仅仅提升函数的名称。

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

例子

在这个例子中，我们在编写函数之前调用它。让我们看看在编写函数之前调用函数会发生什么。

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

输出

Hello world

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

但是，函数表达式不能被提升。让我们试着看看下面例子中提升函数表达式的说明。

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

当你执行上面的代码时，你会得到一个"TypeError: hello is not a function."这是因为函数表达式不能被提升。

输出

TypeError: hello is not a function

函数构造器

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

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

语法

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

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

使用的参数

它的语法包括:

arg1, arg2, ... argN:这些是函数用作形式参数名称的名称。每个参数必须是一个与 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

函数表达式v/s函数声明

两者的根本区别在于函数声明在执行之前被解析，而函数表达式只有在执行时才被解析脚本引擎在执行过程中遇到它。

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

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

ES6 事件

ES6 动画