本文作者为 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 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。