ES6 - 函数

上一页
下一页

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

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 中，如果函数没有传递任何值或其值为 undefined，则函数允许将参数初始化为默认值。以下代码说明了这一点。

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

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

示例 1

以下示例显示了一个函数，该函数接受两个参数并返回它们的和。第二个参数的默认值为 10。这意味着，如果未向第二个参数传递任何值，则其值为 10。

<script>
   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))
</script>

上述代码的输出如下所示：

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

示例 2

<script>
   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))
</script>

上述代码的输出如下所示：

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

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

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

递归和 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 
Uncaught ReferenceError: x is not define

生成器函数

当调用普通函数时，控制权保留在被调用的函数中，直到它返回。使用 ES6 中的生成器，调用函数现在可以控制被调用函数的执行。生成器类似于常规函数，除了：

  • 函数可以在任何时候将控制权返回给调用方。

  • 当您调用生成器时，它不会立即运行。相反，您会得到一个迭代器。当您调用迭代器的 next 方法时，函数就会运行。

生成器用在 function 关键字后面加上星号来表示；否则，它们的语法与常规函数相同。

以下示例说明了这一点。

"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 分配给变量 name 并生成“你最喜欢的运动是什么？”生成器再次暂停。

  • 调用 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 中的函数。现在让我们详细了解一下。

ES5 和匿名函数

JavaScript 广泛使用匿名函数。匿名函数是指没有与之关联名称的函数。匿名函数用于函数回调。以下示例说明了在 ES5 中使用匿名函数：

<script>
   setTimeout(function(){
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

以上示例将一个匿名函数作为参数传递给预定义的setTimeout() 函数。setTimeout() 函数将在 1 秒后回调匿名函数。

1 秒后显示以下输出：

Learning at TutorialsPoint is fun!!

箭头函数语法

ES6 引入了箭头函数的概念，以简化匿名函数的使用。箭头函数包含三个部分，如下所示：

  • 参数 - 箭头函数可以选择性地包含参数

  • 胖箭头符号 (=>) - 也称为“转到”运算符

  • 语句 - 表示函数的指令集

提示 - 根据约定，建议对于简洁且精确的箭头函数声明使用单个字母参数。

语法

//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}

示例：ES6 中的箭头函数

以下示例使用箭头函数定义了两个函数表达式add 和isEven

<script>
   const add = (n1,n2) => n1+n2
   console.log(add(10,20))

   const isEven = (n1) => {
      if(n1%2 == 0)
         return true;
      else
         return false;
   }
   console.log(isEven(10))
</script>

上述代码的输出如下所示：

30
true

Array.prototype.map() 和箭头函数

在以下示例中，一个箭头函数作为参数传递给Array.prototype.map() 函数。map() 函数对数组中的每个元素执行箭头函数。在这种情况下，箭头函数显示数组中的每个元素及其索引。

<script>
   const names = ['TutorialsPoint','Mohtashim','Bhargavi','Raja']
   names.map((element,index)=> {
      console.log('inside arrow function')
      console.log('index is '+index+' element value is :'+element)
   })
</script>

以上代码的输出将如下所示：

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

示例：window.setTimeout() 和箭头函数

以下示例将一个箭头函数作为参数传递给预定义的setTimeout() 函数。setTimeout() 函数将在 1 秒后回调箭头函数。

<script>
   setTimeout(()=>{
      console.log('Learning at TutorialsPoint is fun!!')
   },1000)
</script>

1 秒后显示以下输出：

Learning at TutorialsPoint is fun!!

箭头函数和“this”

在箭头函数内部，如果我们使用this 指针，它将指向封闭的词法作用域。这意味着箭头函数不会在每次调用时创建一个新的this 指针实例。箭头函数使用其封闭的作用域。为了理解这一点，让我们看一个例子。

<script>
   //constructor function
   function Student(rollno,firstName,lastName) {
      this.rollno = rollno;
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
            //creates a new instance of this ,hides outer scope of this
            console.log(this.firstName+ " "+this.lastName)
         },2000)
      }
      this.fullNameUsingArrow = function(){
         setTimeout(()=>{
            //uses this instance of outer scope
            console.log(this.firstName+ " "+this.lastName)
         },3000)
      }
   }
   const s1 = new Student(101,'Mohammad','Mohtashim')
   s1.fullNameUsingAnonymous();
   s1.fullNameUsingArrow();
</script>

当匿名函数与setTimeout()一起使用时，函数将在 2000 毫秒后被调用。会创建一个新的“this”实例，它会覆盖 Student 函数的实例。因此，this.firstName 和this.lastName 的值将为undefined。该函数不使用词法作用域或当前执行的上下文。这个问题可以通过使用箭头函数来解决。

以上代码的输出将如下所示：

undefined undefined
Mohammad Mohtashim
打印页面
上一页
下一页
广告