📅 最后修改于: 2020-10-25 10:31:46 🧑 作者: Mango
功能是可读，可维护和可重用代码的构建块。使用函数关键字定义功能。以下是定义标准函数的语法。
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语句。
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
为了更好地理解，让我们考虑以下示例。
以下示例显示了一个函数，该函数接受两个参数并返回它们的和。第二个参数的默认值为10。这意味着，如果没有值传递给第二个参数，则其值为10。
上面代码的输出将如下所述-
first parameter is : 20
second parameter is : 10
case 1 sum: 30
first parameter is : 2
second parameter is : 3
case 2 sum: 5
first parameter is : undefined
second parameter is : 10
case 3 sum: NaN
first parameter is : 1
second parameter is : null
case 4 sum 1
first parameter is : 3
second parameter is : 10
case 5 sum 13
上面代码的输出将如下所示-
first parameter is : 1
second parameter is : 30
case 1 sum 31
first parameter is : 3
second parameter is : 30
case 2 sum 33
其余参数类似于Java中的变量参数。其余参数并不限制您可以传递给函数的值的数量。但是，传递的值必须全部为同一类型。换句话说，其余参数充当同一类型的多个参数的占位符。
要声明rest参数，参数名称以三个句点为前缀，称为散布运算符。以下示例对此进行了说明。
function fun1(...params) {
console.log(params.length);
}
fun1();
fun1(5);
fun1(5, 6, 7);
成功执行上述代码后，将显示以下输出。
0
1
3
注–其余参数应为函数参数列表中的最后一个。
未绑定到标识符（函数名称）的函数称为匿名函数。这些函数在运行时动态声明。就像标准函数一样，匿名函数可以接受输入和返回输出。匿名函数最初创建后通常无法访问。
可以为变量分配一个匿名函数。这样的表达式称为函数表达式。
以下是匿名函数的语法。
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（）构造函数以及new运算符动态地定义函数。
以下是使用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
递归是一种迭代操作的技术，方法是使函数重复调用自身直到获得结果。当您需要在循环中使用不同的参数重复调用同一函数时，最好应用递归。
示例-递归
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函数由3部分组成-
参数-函数可以选择具有参数。
粗箭头符号/ lambda符号（=>）：也称为gos运算符。
语句-表示函数的指令集。
提示-按照惯例，鼓励使用单个字母参数进行紧凑而精确的函数声明。
它是一个匿名函数表达式，指向单个代码行。以下是相同的语法。
([param1, parma2,…param n] )=>statement;
示例-Lambda表达式
var foo = (x)=>10+x
console.log(foo(10))
该示例声明一个lambda表达式函数。该函数返回10与传递的参数之和。
成功执行上述代码后，将显示以下输出。
20
它是一个匿名函数声明，指向代码块。函数主体跨越多行时使用此语法。以下是相同的语法。
( [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）可用于避免块内的变量提升。它允许公众访问方法，同时保留函数定义的变量的私密性。这种模式称为自执行匿名函数。以下两个示例可以更好地说明这一概念。
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();
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
Uncaught ReferenceError: x is not define
调用普通函数，控件将停留在被调用的函数，直到返回为止。随着ES6发电机，主叫函数现在可以控制调用函数的执行。生成器类似于常规函数，除了-
该函数可以随时将控制权交还给调用者。
当您调用生成器时，它不会立即运行。相反，您将获得一个迭代器。该函数在调用迭代器的next方法时运行。
生成器通过在函数关键字后缀星号来表示；否则，它们的语法与常规函数相同。
以下示例对此进行了说明。
"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
}
注–生成器功能不能使用箭头功能表示。
ES中引入的箭头函数有助于以简洁的方式用JavaScript编写函数。现在让我们详细了解一下。
JavaScript大量使用匿名函数。匿名函数是未附加名称的函数。在函数回调期间使用匿名函数。以下示例说明了ES5中匿名函数的使用-
上面的示例将匿名函数作为参数传递给预定义的setTimeout（）函数。 setTimeout（）函数将在1秒后回调匿名函数。
1秒后显示以下输出-
Learning at TutorialsPoint is fun!!
ES6引入了箭头函数的概念，以简化匿名函数的使用。箭头函数由3部分组成-
参数-箭头函数可以选择具有参数
粗箭头符号（=>） -也称为gos运算符
语句-表示函数的指令集
提示-按照惯例，鼓励使用单个字母参数进行紧凑而精确的箭头函数声明。
//Arrow function that points to a single line of code
()=>some_expression
//Arrow function that points to a block of code
()=> { //some statements }`
//Arrow function with parameters
(param1,param2)=>{//some statement}
以下示例使用箭头函数定义了两个函数表达式add和isEven
上面代码的输出将如下所述-
30
true
在下面的示例中，箭头函数作为参数传递给Array.prototype.map（）函数。 map（）函数为数组中的每个元素执行箭头函数。在这种情况下，箭头函数显示数组中的每个元素及其索引。
上面代码的输出如下：
inside arrow function
index is 0 element value is :TutorialsPoint
inside arrow function
index is 1 element value is :Mohtashim
inside arrow function
index is 2 element value is :Bhargavi
inside arrow function
index is 3 element value is :Raja
以下示例将箭头函数作为参数传递给预定义的setTimeout（）函数。 setTimeout（）函数将在1秒后回调arrow函数。
1秒后显示以下输出-
Learning at TutorialsPoint is fun!!
在箭头函数，如果使用此指针，它将指向封闭的词法范围。这意味着箭头函数不会在每次调用时创建新的this指针实例。箭头函数利用了它的封闭范围。为了理解这一点，让我们看一个例子。
当将匿名函数与setTimeout（）一起使用时，该函数将在2000毫秒后被调用。创建了一个“ this”的新实例，它遮盖了Student函数的实例。因此， this.firstName和this.lastName的值将是undefined 。该函数不使用词法范围或当前执行的上下文。使用箭头函数可以解决此问题。
上面的代码输出如下：
undefined undefined
Mohammad Mohtashim