本文作者为 360 奇舞团前端开发工程师
TypeScript 之 Lambda 函数
Lambda 函数 又称箭头函数
箭头函数表达式语法比函数表达式语法更简短,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
ES6版本的TypeScript 提供的箭头函数,是定义匿名函数的简写语法,用于函数表达式,省略了function关键字。箭头函数具有this 关键的语法作用。
箭头函数的作用:
当我们不需继续输入功能;
它从词汇上捕捉这个关键字的含义;
它从词汇上抓住了参数的意义。
语法
可以分三部分
参数:函数可以有参数,也可以没有参数
箭头符号:=>
语句:表示函数的指令集
如果用箭头函数表示法,就不需要使用function 关键字。参数在()中传递,函数表达式在{}中。
基础语法
(param1, param2, ..., paramN) => { statements }
(param1, param2, ..., paramN) => expression
//当只有一个参数时,圆括号可以省略,可选的
(singleParam) => { statements }
//省略圆括号
singleParam => { statements }
//没有参数的函数应该写成一对圆括号
() => { statements }
ES6 提供了其它写匿名函数的方式,语法糖。
//sum 是一个箭头函数, a、b 是参数,a、b后面的:number 是参数类型 : number 是返回类型
箭头符号分隔了函数参数和函数体
const sum = (a: number,b: number): number => {
return a+b;
}
console.log(sum(20,30))// return 50
当不需要函数体,只返回一个值当时候,可省略return 关键字和外面的花括号。
const fun = () => 'value';
类中箭头函数使用
class Student {
stucode: number
stuname: string
//构造函数 构造Student对象
constructor (code: number, name: string) {
this.stucode = code
this.stuname =name
}
studetail = () => {
console.log('stucode:' + this.stucode + '\nstunam:' + this.stuname )
}
}
export { Student }
import { Student } from '@/views/Student'
let stu = new Student(100, 'jorn')
stu.studetail()
带参数的箭头函数
const fun = (item: number ) => item*2;
//当只有一个参数时候,可以省略参数外面的括号
const fun = item => item*2;
//多个参数传递
const fun = (item: number,item1: number, item2: boolean) => {
let value;
if(item2){
item++;
value= item;
}else {
item1 ++;
value = item1;
}
return value;
}
箭头函数 不能用作构造器,和new 一起用会抛出错误。也没有prototype 属性。yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。因此,箭头函数不能用作函数生成器。
函数体
箭头函数可以有一个"简写体"或常见的“块体”
//简写函数 省略 return
var func = x => x+x ;
//常规写法
var func = (x,y) => { return x+y; };
返回对象字面量
记住用 params => {object: literal}
这种简单的语法返回对象字面量是行不通的。
// 下面这样行不通
var func = () => { foo: 1 };
var func = () => { foo: function() {} };
这是因为花括号({})里面的代码被解析位一系列语句(即foo 被认为是一个标签,而非对象字面量的组成部分)。所以,记得用圆括号把对象字面量包起来。
var func = () => ({foo: 1});
换行
箭头函数在参数和箭头之间不能换行。
不可以写成下面的,这样是错误的
var func = ()
=> 1;
但是,可以在‘=>'之后换行
var func = (a,b,c) =>
{
1;
}
箭头函数也可以使用闭包
//标准的闭包函数
function A(){
var i=0;
return function b(){
return (++i);
};
};
var v =A();
v();//1
v();//2
// 箭头函数体的闭包(i=0 是默认参数)
var Add = (i=0) => { return (() => (++i) )};
var v = Add();
v();//1
v();//2
因为只有一个返回值,return 及括号() 也可以省略
var Add = (i=0) => () => (++i);
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。