ES6 函数

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

function function_name() { 
   // 函数体
} 

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

function_name()

简单的函数定义

// 定义函数
function test() { 
   console.log("function called") 
} 
// 调用函数
test()

该示例定义了一个函数 test()。 一对定界符 {} 定义函数体。 它也被称为函数作用域。 必须调用一个函数来强制执行它。

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

function called

函数分类

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

返回函数

函数还可以将值连同控制一起返回给调用者。 此类函数称为返回函数。

以下是返回函数的语法。

function function_name() { 
   // 执行语句
   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

为了更好地理解，让我们考虑以下示例。

示例

以下示例显示了一个函数，该函数接受两个参数并返回它们的总和。 第二个参数的默认值为 10。这意味着，如果没有值传递给第二个参数，它的值将为 10。

function addTwoNumbers(first,second = 10){
    console.log('first parameter is :',first)
    console.log('second parameter is :',second)
    return first+second;
}

console.log("case 1 sum:",addTwoNumbers(20)) // no value
console.log("case 2 sum:",addTwoNumbers(2,3))
console.log("case 3 sum:",addTwoNumbers())
console.log("case 4 sum",addTwoNumbers(1,null))//null passed
console.log("case 5 sum",addTwoNumbers(3,undefined))

运行示例

上述代码执行结果如下所示

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

示例二

let DEFAULT_VAL = 30
function addTwoNumbers(first,second = DEFAULT_VAL){
     console.log('first parameter is :',first)
     console.log('second parameter is :',second)
     return first+second;
}
console.log("case 1 sum",addTwoNumbers(1))
console.log("case 2 sum",addTwoNumbers(3,undefined))

运行示例

上述代码执行结果如下所示

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 中的变量参数。 剩余参数不限制我们可以传递给函数的值的数量。 但是，传递的值必须都是同一类型。 换句话说，剩余参数充当相同类型的多个参数的占位符。

要声明一个剩余参数，参数名称以三个句点为前缀，称为扩展运算符。 以下示例说明了相同的情况。

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

运行示例

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

函数提升

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

以下代码片段说明了 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

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

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