在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