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 }
注意-生成器函数不能使用箭头函数表示。