学习ES6（六）--函数 Lambda函数（=>） 详解

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

function function_name() { 
   // function body 
} 

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

function_name()

功能分类

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

返回功能

函数也可以将值与控制一起返回给调用者。这些函数称为返回函数。

以下是返回函数的语法。

function function_name() { 
   //statements 
   return value; 
}

• 返回函数必须以return语句结尾。

• 一个函数最多可以返回一个值。换句话说，每个函数只能有一个return语句。

• return语句应该是函数中的最后一条语句。

•  

  参数化功能

  参数是一种将值传递给函数的机制。参数构成函数签名的一部分。参数值在调用过程中传递给函数。除非明确指定，否则传递给函数的值的数量必须与定义的参数的数量匹配。

  以下是定义参数化函数的语法。

function func_name( param1,param2 ,…..paramN) {   
   ...... 
   ...... 
}

默认功能参数

在ES6中，如果没有传递任何值或未定义参数，则该函数允许使用默认值初始化参数。下面的代码对此进行了说明。

function add(a, b = 1) { 
   return a+b; 
} 
console.log(add(4)) // 输出 5

上面的函数默认将b的值设置为1。除非已明确传递值，否则该函数将始终认为参数b的值为1。

如果函数显式传递一个值，则该参数的默认值将被覆盖。

Rest参数

其余参数类似于Java中的变量参数。Rest参数不限制可以传递给函数的值的数量。但是，传递的值必须全部为同一类型。换句话说，rest参数充当相同类型的多个参数的占位符。

要声明rest参数，参数名称以三个句点为前缀，即扩展运算符。以下示例对此进行了说明

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  //输出0
fun1(5); //输出1
fun1(5, 6, 7); //输出3

匿名函数

未绑定到标识符（函数名称）的函数称为匿名函数。这些函数在运行时动态声明。就像标准函数一样，匿名函数可以接受输入和返回输出。匿名函数最初创建后通常无法访问。

可以为变量分配匿名函数。这样的表达式称为函数表达式。

以下是匿名函数的语法。

注 –Rest参数应为函数参数列表中的最后一个

var res = function( [arguments] ) { ... } 

匿名参数化函数

var func = function(x,y){ return x*y }; 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result) //输出：The product : 200 
} 
product()

函数构造器

函数语句不是定义新函数的唯一方法；可以使用Function（）构造函数以及new运算符来动态定义函数。

以下是使用Function（）构造函数以及new运算符创建函数的语法。

var variablename = new Function(Arg1, Arg2..., "Function Body"); 

Function（）构造函数需要任意数量的字符串参数。最后一个参数是函数的主体–它可以包含任意JavaScript语句，以分号分隔。

示例

var func = new Function("x", "y", "return x*y;"); 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result)//输出：The product : 200
} 
product()

递归和JavaScript函数

递归是一种迭代操作的技术，方法是使函数重复调用自身直到获得结果。当您需要在循环中使用不同的参数重复调用同一函数时，最好应用递归。

示例-递归

function factorial(num) { 
   if(num <= 0) { 
      return 1; 
   } else { 
      return (num * factorial(num-1)  ) 
   } 
} 
console.log(factorial(6)) //输出:720

Lambda函数

Lambda是指编程中的匿名函数。Lambda函数是表示匿名函数的简洁机制。这些功能也称为箭头功能。

Lambda函数-详解

Lambda函数由3部分组成-

• 参数 -函数可以选择具有参数。

• 所述箭头符号/λ符号（=>）：它也被称为作为前进到操作者。

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

Lambda表达式

一个匿名函数表达式，指向单个代码行。以下是相同的语法：

([param1, parma2,…param n] )=>statement;

示例-Lambda表达式

var foo = (x)=>10+x 
console.log(foo(10)) //输出：20

Lambda声明

一个匿名函数声明，指向代码块。函数主体跨越多行时使用此语法。以下是相同的语法

( [param1, parma2,…param n] )=> {       
   //code block 
}

示例-Lambda语句

函数的引用返回并存储在变量msg中

var msg = ()=> { 
   console.log("function invoked") 
} 
msg() //输出：function invoked 

句法变化

单个参数的可选括号。

var msg = x=> { 
   console.log(x) 
} 
msg(10)

单个语句的可选大括号。空括号表示无参数。

var disp = ()=>console.log("Hello World") 
disp();

函数表达式和函数声明

函数表达式和函数声明不是同义词。与函数表达式不同，函数声明由函数名称绑定。

两者之间的根本区别在于，函数声明是在执行之前进行解析的。另一方面，仅当脚本引擎在执行过程中遇到函数表达式时，才会对函数表达式进行解析。

当JavaScript解析器在主代码流中看到一个函数时，它将假定为函数声明。当函数作为语句的一部分出现时，它就是函数表达式。

函数提升

示例-JavaScript中的函数提升：

hoist_function();  //输出：foo
function hoist_function() { 
   console.log("foo"); 
} 

但是，不能提升函数表达式：

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

生成器

调用普通函数时，控件将停留在被调用的函数上，直到返回为止。使用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引入了箭头功能的概念，以简化匿名功能的使用。箭头功能由3部分组成-

• 参数 -箭头功能可以选择具有参数

• 粗箭头符号（=>） -也称为gos运算符

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

提示 -按照惯例，鼓励使用单个字母参数来进行紧凑而精确的箭头函数声明。

语法

(param1,param2)=>{//some statement}  
()=> { //some statements } //无参
()=>some_expression //只有一行代码

以下示例使用箭头函数定义了两个函数表达式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

箭头功能和“ this”

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

<script>
   //constructor function
   function Student(rollno,firstName,lastName) {
      this.rollno = rollno;
      this.firstName = firstName;
      this.lastName = lastName;
  //此处的this等于一个Student
      this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
            //creates a new instance of this ,hides outer scope of this
            //此处的this 等于一个new Student对象 后一个this覆盖了前一个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)
      }
   }

当匿名函数与setTimeout（）一起使用时，该函数将在2000毫秒后被调用。创建了一个“ this”的新实例，它遮盖了Student函数的实例。因此，this.firstName和this.lastName的值将是undefined。该函数不使用词法范围或当前执行的上下文。使用箭头功能可以解决此问题。

上面的代码输出如下：

undefined undefined
Mohammad Mohtashim

   const s1 = new Student(101,'Mohammad','Mohtashim')
   s1.fullNameUsingAnonymous();
   s1.fullNameUsingArrow();
</script>

最后

以上就是还单身八宝粥为你收集整理的学习ES6（六）--函数 Lambda函数（=>） 详解的全部内容，希望文章能够帮你解决学习ES6（六）--函数 Lambda函数（=>） 详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。