箭头函数

在 JavaScript 和 TypeScript 里，我们会经常遇到不需要给函数命名的情况，尤其是在需要将一个函数作为参数传给另外一个函数的时候。这时，我们会创建 匿名函数 。因为这些函数不会在其他地方复用，所以我们不需要给它们命名。

这种情况下，我们通常会使用以下语法：

const myFunc = function() {const myVar = "value";return myVar;
}

ES6 提供了其他写匿名函数的方式的语法糖。你可以使用 箭头函数 ：

const myFunc = () => {const myVar = "value";return myVar;
}

当不需要函数体，只返回一个值的时候 ，箭头函数允许你省略 return 关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。

const myFunc = () => "value";

这段代码默认会返回字符串 value。

带参数的箭头函数

和一般的函数一样，你也可以给箭头函数传递参数。

JavaScript：

const doubler = (item) => item * 2;
doubler(4);

TypeScript：

const doubler = (item: number) => item * 2;
doubler(4);

doubler(4) 将返回 8。

如果箭头函数只有一个参数，则可以省略参数外面的括号。

const doubler = item => item * 2;

注：在 TypeScript 里如果要进行类型注解的话，是不可以省略括号的，如省略了括号的话，则不进行类型注解，默认为 any 类型

可以给箭头函数传递多个参数。

JavaScript：

const multiplier = (item, multi) => item * multi;
multiplier(4, 2);

TypeScript：

const multiplier = (item: number, multi: number) => item * multi;
multiplier(4, 2);

multiplier(4, 2) 将返回 8。

【TypeScript】箭头函数相关推荐

typescript箭头函数参数_Typescript 入门基础篇（一）
Typescript 基础 Typescript是Javascript的一个超集.以下typescript简称为ts, 此文章主要是对ts官网文档的一个简化,缩短学习基础时间. 类型基础 ts 的类型 ...
TypeScript入门教程之箭头函数
TypeScript入门教程之箭头函数亲切地称为粗箭头(因为->是细箭头并且=>是粗箭头),也被称为lambda函数(由于其他语言).另一个常用功能是胖箭头功能()=>some ...
如何理解JavaScript多个连续箭头函数书写方式
导言: 本菜鸡在学习Vue编程的时候,看到有大佬写的代码用了多个连续箭头函数,完全不能理解是什么意思.经过多方调查和思考才初步理解.本篇文章记录一下自己学习和理解的心得. 有多个箭头函数的代码如何执行 ...
箭头函数：this的指向问题
关于typescript中函数的定义,有提到过它的定义方式(详见:函数的定义及特性),当时提到typescript中的'=>'不是ES6中的箭头函数的意思.什么是ES6的箭头函数?代码如下: v ...
typescript中函数_如何在TypeScript中合成Canvas动画
typescript中函数 by Changhui Xu 徐昌辉如何在TypeScript中合成Canvas动画 (How to Compose Canvas Animations in TypeS ...
Java箭头函数,lambda函数
Java箭头函数,lambda函数 lambda表达式实质就是一种语法糖,(建议尽量不要使用lambda表达式,代码太简洁,难懂,难以调试) lambda表达式的简单例子: 不需要参数,返回5 ()- ...
es6箭头函数(=)与展开特性运算符(...)的使用
2019独角兽企业重金招聘Python工程师标准>>> 箭头函数的几个写法 //当含有固定个参数的时候,es5写法 function test(a,b){ ..}//es6写法(es ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
es6箭头函数中this
普通函数: $scope.$on('$stateChangeSuccess',function(){this.list = this.getList();}); 箭头函数: $scope.$on('$ ...

【TypeScript】箭头函数

箭头函数

带参数的箭头函数

【TypeScript】箭头函数相关推荐

最新文章

热门文章