ES6 - 函数

ES6 函数

函数是可读，可维护和可重用代码的构建块。函数是使用函数关键字定义的。以下是定义标准函数的语法。

function function_name() {
   // function body
}

要强制执行该功能，必须调用它。这称为函数调用。以下是调用函数的语法。

function_name()

例子：简单的函数定义

//define a  function
function test() {
   console.log("function called")
}
//call the function
test()

该示例定义了一个函数test（）。一对分隔符（{}）定义了函数体。它也被称为功能范围。必须调用一个函数来强制执行。

在成功执行上述代码时，会显示以下输出。

function called

函数分类

函数可以分为返回和参数化函数。

返回函数

函数还可以将值和控件一起返回给调用者。这些函数被称为返回函数。

以下是返回函数的语法。

function function_name() {
   //statements
   return value;
}
  • 返回函数必须以return语句结束。
  • 一个函数最多可以返回一个值。换句话说，每个函数只能有一个返回语句。
  • return语句应该是函数中的最后一个语句

以下代码片段是返回函数的示例 -

function retStr() {
   return "hello world!!!"
}  
var val = retStr()
console.log(val)

上面的例子定义了一个函数，它返回字符串“hello world !!!”给调用者。在成功执行上述代码时，会显示以下输出。

hello world!!!

函数参数

参数是一种将值传递给函数的机制。参数构成函数签名的一部分。参数值在调用期间传递给函数。除非明确指定，否则传递给函数的值的数量必须与定义的参数数量相匹配。

以下是定义参数化函数的语法。

function func_name( param1,param2 ,…..paramN) {   
   ......
   ......
}

示例 - 函数参数

该示例定义了一个函数add，它接受两个参数n1和n2并打印它们的和。参数值在调用时传递给函数。

function add( n1,n2) {
   var sum = n1 + n2
   console.log("The sum of the values entered "+sum)
}
add(12,13)

在成功执行上述代码时，会显示以下输出。

The sum of the values entered 25

默认函数参数

在ES6中，如果没有值传递给它，或者它是未定义的，则函数允许使用默认值初始化参数。下面的代码说明了这一点。

function add(a, b = 1) {
   return a+b;
}
console.log(add(4))

上面的函数默认将b的值设置为1。该函数将始终考虑参数b承载值1，除非已明确传递一个值。在成功执行上述代码时，会显示以下输出。

5

如果函数显式传递一个值，参数的默认值将被覆盖。

function add(a, b = 1) {
   return a + b;
}
console.log(add(4,2))

上面的代码明确地将参数b的值设置为2，从而覆盖其默认值。在成功执行上述代码时，会显示以下输出。

6

Rest参数

Rest参数与Java中的可变参数类似。其余参数不会限制您可以传递给函数的值的数量。但是，传递的值必须都是相同的类型。换句话说，其余参数充当相同类型的多个参数的占位符。

要声明一个Rest参数，参数名称前面加上三个句点，称为展开操作符。以下示例说明了相同的情况。

function fun1(...params) {
   console.log(params.length);
}  
fun1();  
fun1(5);
fun1(5, 6, 7);

在成功执行上述代码时，会显示以下输出。

0
1
3

注 - Rest参数应该是函数参数列表中的最后一个参数。

匿名函数

不绑定到标识符（函数名称）的函数被称为匿名函数。这些函数在运行时动态声明。匿名函数可以接受输入和返回输出，就像标准函数一样。匿名函数在初始创建后通常不可访问。

变量可以分配一个匿名函数。这样的表达称为函数表达式。

以下是匿名函数的语法。

var res = function( [arguments] ) { ... }

示例 - 匿名函数

var f = function(){ return "hello"}
console.log(f())

在成功执行上述代码时，会显示以下输出。

hello

示例 - 匿名参数化函数

var func = function(x,y){ return x*y };
function product() {
   var result;
   result = func(10,20);
   console.log("The product : "+result)
}
product()

在成功执行上述代码时，会显示以下输出。

The product : 200

函数构造函数

函数声明不是定义新函数的唯一方法;您可以使用Function（）构造函数和新运算符动态地定义您的函数。

以下是使用Function（）构造函数和new运算符创建函数的语法。

var variablename = new Function(Arg1, Arg2..., "Function Body");

Function（）构造函数需要任意数量的字符串参数。最后一个参数是函数的主体 - 它可以包含任意的JavaScript语句，用分号分隔。

Function（）构造函数不传递任何参数，该参数为其创建的函数指定名称。

示例 - 函数构造函数

var func = new Function("x", "y", "return x*y;");
function product() {
   var result;
   result = func(10,20);
   console.log("The product : "+result)
}
product()

在上面的例子中，Function（）构造函数用于定义一个匿名函数。该函数接受两个参数并返回它们的产品。

在成功执行上述代码时，会显示以下输出。

The product : 200

递归和JavaScript函数

递归是一种通过让一个函数自己重复调用自身来迭代一个操作直到它到达结果的技术。递归最适用于需要使用循环内的不同参数重复调用相同函数的情况。

示例 - 递归

function factorial(num) {
   if(num<=0) {
      return 1;
   } else {
      return (num * factorial(num-1)  )
   }
}
console.log(factorial(6))

在上面的例子中，函数调用它自己。在成功执行上述代码时，会显示以下输出。

720

示例 - 匿名递归函数

(function() {
   var msg = "Hello World"
   console.log(msg)
})()

该函数使用一对括号（）来调用它自己。在成功执行上述代码时，会显示以下输出。

Hello World

Lambda函数

Lambda是指编程中的匿名函数。Lambda函数是一个简洁的机制来表示匿名函数。这些功能也称为箭头功能。

Lambda函数 - 解剖学

有一个Lambda函数的3个部分:

  • 参数 - 函数可以有选择地使用参数。
  • 胖箭头符号/ lambda符号（=>）：它也被称为去运算符。
  • 语句 - 表示函数的指令集。

提示 - 按照惯例，鼓励使用单个字母参数以实现紧凑而精确的功能声明。

Lambda表达式

它是一个匿名函数表达式，指向一行代码。以下是相同的语法。

([param1, parma2,…param n] )=>statement;

示例 - Lambda表达式

var foo = (x)=>10+x
console.log(foo(10))

该示例声明了一个lambda表达式函数。该函数返回10和传递的参数的总和。

在成功执行上述代码时，会显示以下输出。

20

Lambda声明

这是一个匿名函数声明，指向一段代码。当函数体跨越多行时使用此语法。以下是相同的语法。

( [param1, parma2,…param n] )=> {       
   //code block
}

示例 - Lambda声明

var msg = ()=> {
   console.log("function invoked")
}
msg()

函数的引用被返回并存储在变量msg中。在成功执行上述代码时，会显示以下输出。

function  invoked

句法变体

单个参数的可选括号。

var msg = x=> {
   console.log(x)
}
msg(10)

单个语句的可选花括号。空括号没有参数。

var disp = ()=>console.log("Hello World")
disp();

函数表达式和函数声明

函数表达式和函数声明不是同义词。与函数表达式不同，函数声明受函数名称的约束。

两者之间的根本区别在于，函数声明在执行之前被解析。另一方面，函数表达式仅在脚本引擎在执行期间遇到它时才被解析。

当JavaScript解析器在主代码流中看到一个函数时，它将采用函数声明。当一个函数作为语句的一部分出现时，它就是一个函数表达式。

函数提升

像变量一样，函数也可以被挂起。与变量不同，函数声明在被挂起时提升函数定义而不是提升函数的名称。

以下代码片段说明了JavaScript中的函数提升。

hoist_function();  
function hoist_function() {
   console.log("foo");
}

在成功执行上述代码时，会显示以下输出。

foo

但是，函数表达式不能被挂起。以下代码片段说明了相同的情况。

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() {
   console.log("bar");
};

立即调用函数表达式

立即调用的函数表达式（IIFE）可用于避免块内的变量提升。它允许公众访问方法，同时保留函数中定义的变量的隐私。这种模式被称为自我执行的匿名函数。以下两个例子更好地解释了这个概念。

例1：IIFE

var main = function() {
   var loop = function() {
      for(var x = 0;x<5;x++) {
         console.log(x);
      }
   }();
   console.log("x can not be accessed outside the block scope x value is :"+x);
}
main();

例2：IIFE

var main = function() {
   (function() {
      for(var x = 0;x<5;x++) {
         console.log(x);
      }
   })();
   console.log("x can not be accessed outside the block scope x value is :"+x);
}
main();

这两个示例都将呈现以下输出。

0
1
2
3
4
5
Uncaught ReferenceError: x is not define

生成器功能

当一个正常的函数被调用时，控件将停留在被调用的函数中，直到它返回。使用ES6中的生成器，调用者函数现在可以控制被调用函数的执行。发电机就像一个普通的功能，除了：

  • 该功能可以在任何时候让控制权回到主叫方。
  • 当你调用生成器时，它不会立即运行。相反，你得到一个迭代器。该函数在您调用迭代器的下一个方法时运行。

生成器通过后缀函数关键字用星号表示;否则，它们的语法与常规函数相同。

以下示例说明了相同的情况。

"use strict"
function* rainbow() {
   // the asterisk marks this as a generator
   yield 'red';
   yield 'orange';
   yield 'yellow';
   yield 'green';
   yield 'blue';
   yield 'indigo';
   yield 'violet';
}
for(let color of rainbow()) {
   console.log(color);
}

生成器启用调用者和被调用函数之间的双向通信。这是通过使用yield关键字来完成的。

考虑下面的例子 -

function* ask() {
   const name = yield "What is your name?";
   const sport = yield "What is your favorite sport?";
   return `${name}'s favorite sport is ${sport}`;
}  
const it = ask();
console.log(it.next());
console.log(it.next('Ethan'));  
console.log(it.next('Cricket'));

生成器功能的顺序如下 -

  • 生成器开始暂停说明;迭代器返回。
  • it.next（）产生“你的名字是什么”。生成器暂停。这由yield关键字完成。
  • 调用it.next（“Ethan”）将Ethan值赋给变量名并产生“你最喜欢的运动是什么？”生成器再次暂停。
  • 调用it.next（“Cricket”）将值Cricket赋值给变量sport并执行后面的return语句。

因此，上述代码的输出将是 -

{
   value: 'What is your name?', done: false
}
{
   value: 'What is your favorite sport?', done: false
}
{
   value: 'Ethan\'s favorite sport is Cricket', done: true
}

注 - 生成器函数不能用箭头函数表示