小窥TypeScript: =>表达式

在TypeScript中添加了箭头表达式，和java的lambda很相似。

var sum = () => (1 + 5);
var sum = (arg1, arg2) => (arg1 + arg2);
var func1 = arg => { console.log(arg); }

以上代码相当于js的：

var sum = function () { return (1 + 5); };
var sum = function (arg1, arg2) { return (arg1 + arg2); };
var func1 = function (arg) { console.log(arg); };

可以看出，当参数为1个时，可以省略()，当返回值仅一行代码的时候，我们可以省略{}，当仅使用()括住返回值的时候，默认为return方式。

一个实际应用中的例子：

var arr1 = [10, 8, 15, 6, 4, 20, 21];
console.log(arr1.filter(value => value >= 10));

运行后，我们将数组中大于等于10的元素过滤了出来，运行结果是在控制台打印了一个Array：

Array(4)
0: 10
1: 15
2: 20
3: 21
length: 4

同例子的js代码为：

var arr1 = [10, 8, 15, 6, 4, 20, 21];
console.log(arr1.filter(function (value) { return value >= 10; }));

其=>表达式最好的用处，就是代替了js中的this关键字。 

先看一个传统试用this关键字的js代码：

function getName(name: string) {
    this.name = name;
    setInterval(function () {
        console.log("Name Is :" + this.name);
    }, 1000);
}
var xingming = new getName("hehe");

运行代码，控制台每一秒就会显示一句：

Name Is :

你会发现，传进去的参数不见了。

PS：这段代码在谷歌浏览器中可以跑，但是在IE11及Edge浏览器中，则会提示：Expected ')'。

同样的需求，我们再用=>表达式来写：

function getName(name: string) {
    this.name = name;
    setInterval(() => {
        console.log("Name Is :" + this.name);
    }, 1000);
}
var xingming = new getName("hehe");

这时你会发现变量回来了，控制台正常的输出了：

Name Is : hehe