zoukankan      html  css  js  c++  java
  • 【Angular】——TypeScript之胖箭头(=>)函数

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

    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中更容易使用高阶函数。理解了原理多多实践掌握的会更好。

  • 相关阅读:
    用Python打造一款文件搜索工具,所有功能自己定义!
    Python+Excel+Word一秒制作百份合同
    只需6行代码,Python将PPT转为Word!
    老板让我从几百个Excel中查找数据,我用Python一分钟搞定!
    爬虫遇到头疼的验证码?Python实战讲解弹窗处理和验证码识别
    SoftEther服务端配置
    SoftEther服务端安装
    nginx学习
    zookeeper安装
    prometheus监控之自动发现
  • 原文地址:https://www.cnblogs.com/jiangzhaowei/p/10355865.html
Copyright © 2011-2022 走看看