首页 > 其他 > 详细

【Angular】——TypeScript之胖箭头(=>)函数

时间:2019-02-08 10:07:30      阅读:225      评论:0      收藏:0      [点我收藏+]

前言:
胖箭头(=>)函数是一种快速书写函数的简介语法。

ES5和TypeScript比较:
在ES5中,每当我们要用甘薯作为方法参数时,都必须用function关键字和紧随其后的花括号({})表示,例:

  var data=[Alice,Jack,Rose,Tom];
  data.forEach(function(line)){console.log(line);};

现在用=>语法重写它:

//TypeScript example
var data:string[]=[Alice,Jack,Rose,Tom];
data.forEach((line)=>console.log(line));

当只有一个参数时,圆括号可以省略。箭头(=>)语法可以用作表达式:

var evens=[2,4,6,8];
var code=evens.map(v=>v+1);

也可以用作语句:

data.forEach(line=>{console.log(line.toUpperCase)});

=>语法还有一个重要的特性,它和环绕它的外部代码共享同一个this。这是它和普通function写法最重要的不同点。通常我们用function声明的函数有它自己的this。有事在JavaScript中能看到如下代码:

var nate={
    name:"Nate",
    gutars:["Gibson","Martin","Taylor"],
    printGutars:function(){
    var self=this;
    this.guitars.forEach( function(g){
    //this.name is undefined so we have to use self.name
    console.log(self.name+"plays a "+ g);
    });
}
};

由于胖箭头会共享环绕它的外部代码的this,可以改写成:

var nate={
    name:"Nate",
    gutars:["Gibson","Martin","Taylor"],
    printGutars:function(){
        this.guitars.forEach( (g)=>{
      console.log(this.name+"plays a "+ g);
    });
}
};        

简单实例:

deleteDatas(el: any) {
    let trainingProgramsInfo:TrainingInfo[]=[];
    el.forEach(element => {
    trainingProgramsInfo.push(this.data[element]);
});
    localStorage.setItem("trainingProgramsInfo",JSON.stringify(trainingProgramsInfo));
}

 


总结:
箭头函数是处理内联函数的好办法,这也让我们在TypeScript中更容易使用高阶函数。理解了原理多多实践掌握的会更好。

【Angular】——TypeScript之胖箭头(=>)函数

原文:https://www.cnblogs.com/jiangzhaowei/p/10355865.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!