es6 箭头函数——迹忆客-ag捕鱼王app官网

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