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