ES6 箭头函数

ES 中引入的箭头函数有助于以简洁的方式在 JavaScript 中编写函数。 现在让我们详细了解一下。

ES5 和匿名函数

JavaScript 大量使用匿名函数 。 匿名函数是没有附加名称的函数。 在函数回调期间使用匿名函数。 以下示例说明了 ES5 中匿名函数的使用

setTimeout(function(){
      console.log('Learning at jiyik.com is fun!!')
},1000)

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

1 秒后显示以下输出

Learning at jiyik.com is fun!!

箭头函数语法

ES6 引入了箭头函数的概念来简化匿名函数的使用。 箭头函数有 3 个部分，如下所示 -

• 参数 - 箭头函数可以选择有参数
• 箭头符号 (=>) - 它也被称为转到运算符
• 语句 - 代表函数的指令集

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

语法

// 指向单行代码的箭头函数
()=>函数体

或者

// 指向代码块的箭头函数
()=> { // 函数体 }`

或者

//带参数的箭头函数
(param1,param2)=>{//函数体}

示例 ES6 中的箭头函数

下面的例子使用箭头函数定义了两个函数表达式 add 和 isEven

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

上面代码的输出将如下所述

30
true

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

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

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

运行示例

上面代码的输出如下所示

inside arrow function
index is 0 element value is :Jiyik
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 秒后回调箭头函数。

setTimeout(()=>{
      console.log('Learning at jiyik.com is fun!!')
   },1000)

1 秒后显示以下输出

Learning at jiyik.com is fun!!

箭头函数和 this

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

function Student(rollno,firstName,lastName) {
    this.rollno = rollno;
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullNameUsingAnonymous = function(){
         setTimeout(function(){
                // 创建 this 的新实例，隐藏 this 的外部范围
                console.log(this.firstName+ " "+this.lastName)
         },2000)
    }
    this.fullNameUsingArrow = function(){
         setTimeout(()=>{
                // 使用外部作用域的这个实例
                console.log(this.firstName+ " "+this.lastName)
         },3000)
    }
}
const s1 = new Student(101,'Mohammad','Mohtashim')
s1.fullNameUsingAnonymous();
s1.fullNameUsingArrow();

当匿名函数与 setTimeout() 一起使用时，该函数会在 2000 毫秒后被调用。 创建了一个 this 的新实例，它隐藏了 Student 函数的实例。 因此，this.firstName 和 this.lastName 的值将是未定义的。 该函数不使用词法范围或当前执行的上下文。 这个问题可以通过使用箭头函数来解决。

上述代码的输出如下

undefined undefined
Mohammad Mohtashim