首页 前端知识 TypeScript 之 Lambda 函数

TypeScript 之 Lambda 函数

2024-07-01 23:07:00 前端知识 前端哥 602 351 我要收藏

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

5ffac450f447525cf04be41cb26c9b00.png

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13741.html
标签
评论
发布的文章

在echarts中使用geojson地图

2024-07-29 00:07:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!