发表于： 2021-04-28 19:44:12

1 1621

今天完成的事情：优化了代码

明天计划的事情：完成任务

收获：箭头函数

箭头(=>)函数是一种快速书写函数的简洁语法。

ES5和TypeScript比较：

在ES5中，每当我们要用函数作为方法参数时，都必须用function关键字和紧随其后的花括号({})表示，例：

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

现在用=>语法重写它：

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) {
      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);
    });
  }
};


上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1