开发学院

您的位置:首页>教程>正文

教程正文

ES6 函数

ES6 函数

  函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

function function_name() { 
   // function body 
}

  要执行函数,必须调用它,被称为函数调用。以下是调用函数的语法。

function_name()

例子: 简单的函数定义

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

  示例定义函数test()。函数就是包裹在花括号中的代码块,前面使用了关键词 function:。

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

function called

函数分类

  函数可以被分类为带有返回值的函数和带参数的函数。

带有返回值的函数

  函数可以将结果返回给调用者。这些函数称为返回函数。

  以下是返回函数的语法。

function function_name() { 
   //statements 
   return value; 
}
  •   带有返回值的函数必须以return语句结束。

  •   函数可以有多个return。但是只要触发了一个return,后面的代码就不会执行了。

  •   return语句应该是函数中的最后一个语句。

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

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

  上面的示例定义了一个返回字符串“helloworld!”的函数,。在成功执行上述代码时显示以下输出。

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的值那么b的值就是1。在成功执行上述代码时显示以下输出。

5

  如果函数显式传递值,则参数的默认值将被覆盖。

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

  上述代码将参数b的值显式设置为2,从而改写其默认值。在成功执行上述代码时显示以下输出。

6

rest参数

  rest参数类似于Java中的变量参数。rest参数不限制您可以传递到函数的值的数目。但是,传递的值必须是相同的类型。换句话说,rest参数充当相同类型的多个参数的占位符。

  要声明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()构造器和新运算符创建函数的语法。

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); 
}

  生成器启用调用方与调用函数之间的双向通信。这是通过使用收率关键字实现的。下面是实例: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关键字来完成的。

  call it.next(“Ethan”)将Ethan的价值分配给变量名称和yield“你最喜欢的运动是什么?"生成器再次暂停。

   call it.next(“Cricket”)将Cricket的值分配给变量运动,并执行后续的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 
}

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