[OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?
[OHIF-Viewers]医疗数字阅片-医学影像-中间插播一下-es6-使用const加箭头函数声明函数相对于function声明函数有什么好处?
这个好多人都已经写过了,这里插播一下,在OHIF-Viewers里面有很多这样的写法,当然OHIF-Viewers维护者众多,有人用这种新的写法也有原始的写法,各种历史遗留的写法问题。
这是ES6中的东东,SO要搞REACT相关项目得先打好ES6基础。
OHIF-Viewers项目,跟着博主此系列博文也可加快学习OHIF-Viewers的进度。
此前也写了一篇[OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=>)
ES6中,除了let和const新特性,箭头函数是使用频率最高的新特性了。如果你曾经了解如日中天的JavaScript衍生语言CoffeeScript, 就会清楚此特性并非ES6独创。箭头函数顾名思义是使用箭头(=>)定义的函数,属于匿名函数一类。
今天的文章内容将会从以下几个方面,介绍箭头函数:
- 使用语法
- this穿透
- 箭头函数和传统函数的区别
使用语法
箭头函数有四种使用语法
1、单一参数的单行箭头函数
如下段代码所示,很简单:
const fn= foo =>`${foo} world`;
这是箭头函数最简洁的形式,常用于用作简单的处理函数,如过滤。如下段代码所示:
let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=);
2、多参数的单行箭头函数 语法也很简单,如下段代码所示:
const fn=(foo,bar) => foo+bar
在实际开发中,函数的参数不会只有一个,在箭头函数中,多参数的语法跟普通函数一样,用括号包裹参数项。我们经常处理函数,如排序,示例代码如下:
let array=['a','bc','def','ghij'];
array=array.sort((a,b) => a.length < b.length);
3、多行箭头函数 单一参数,如下段代码所示:
foo => {
return `${foo} world`;
}
多参数,如下段代码所示:
(foo,bar) => {
return foo+bar;
}
4、无参数箭头函数
如果一个箭头函数无参数传入,则需要用一对空的括号来表示空的参数列表。
const greet = () => 'Hello World'
以上都是被支持的箭头函数的表达方式,其最大的好处就是简单明了,省略了function关键字,而使用 => 代替。相对于传统的function函数,箭头函数在简单的函数使用中更为简洁直观。
书写箭头的函数过程中,我们应该注意以下几点:
1、使用单行箭头函数时,应避免换行
错误的用法,如下段代码所示:
const fn=x
=> x* //SyntaxError
正确的写法,如下:
const fn= x => x* //ok
2、参数列别的右括弧、箭头应在一行
错误的用法,如下段代码所示:
const fn = (x,y) //SyntaxError
=> {
return x*y;
}
下段代码书写是正确的:
const fn= (x,y) => { //ok
return x*y
}
const fn= (x,
y) => { //ok
return x*y
}
3、单行箭头函数返回只能包含一条语句
错误的书写,如下段代码所示:
const fn1= x => x=x*; return x+; //SyntaxError
正确的书写,如下段代码所示:
const fn2= x => {
x=x*;
return x+;
} //ok
4、如果单行箭头返回一个对象,请用圆括号包裹
错误的书写,如下段代码所示,解析引擎会将其解析成一个多行箭头函数:
const ids=[,,];
const users=ids.map(id=>{id:id});
//wrong:[ undefined, undefined, undefined ]
正确的书写,如下段代码所示:
const ids=[,,];
const users=ids.map(id=>({id:id}));
//Correct:[ { id: 1 }, { id: 2 }, { id: 3 } ]
箭头函数十分简洁,特别适合单行回调函数的定义,比如我们有以下需求:
我们有一个这样的名字数组names,['Will','Jack','Peter','Steve','John','Hugo','Mike'],输出序号为偶数的名字[ 'Will', 'Peter', 'John', 'Mike' ],我们如何使用箭头函数在一行语句完成呢,如下段代码所示:
const names=['Will','Jack','Peter','Steve','John','Hugo','Mike'];
const newSet=names
.map((name,index)=>({
id:index,
name:name
}))
.filter(man => man.id % ==)
.map(man => [man.name])
.reduce((a,b) => a.concat(b))
this穿透
事实上,箭头函数不仅书写简洁,还有一个神奇的功能,就是将函数内部的this延伸上一层作用域中,及上一层的上下文会穿透到内层的箭头函数中,让我们先看一段实际的例子,如下段所示:
var Widget={
// A
init:function () {
// B
document.addEventListener("click", function (event){
//C
this.doSomething(event.type);
}, false);
},
doSomething:function (type) {
console.log("Handling"+ type+"event");
}
};
Widget.init();
这段代码会如何输出呢,想必大家都猜到了吧,输出undefined,为什么呢?我们在B位置内声明了函数(C区域),this关键词的指向B区域的函数,由于B区域内没有doSomething函数声明,因此输出undefined,ES6之前我们如何修正此问题呢?
我们可以使用bind方法改变this指向A区域Widget对象,示例代码如下:
var Widget={
// A
init:function () {
// B
document.addEventListener("click", (function (event) {
//C
this.doSomething(event.type);
}).bind(this), false);
},
doSomething:function (type) {
console.log("Handling"+ type+"event");
}
};
Widget.init();
下面这种方法是我们最常用的方法,我们在B区域声明了that变量,并将其this赋值,确保c区域this的指向至Widget对象:
var Widget={
// A
init:function () {
// B
var that=this;
document.addEventListener("click", function (event) {
//C
that.doSomething(event.type);
console.log(that);
}, false);
},
doSomething:function (type) {
console.log("Handling"+ type+"event");
}
};
Widget.init();
有了箭头函数,我们可以使用箭头函数的this穿透功能,将this的作用域延伸至上一层B区域函数,如下段代码所示:
var Widget={
//A
init:function () {
//B
document.addEventListener("click", (event) => {
//C
this.doSomething(event.type);
}, false);
},
doSomething:function (type) {
console.log("Handling"+ type+"event");
}
};
Widget.init();
箭头函数是不是更简单,代码更清晰呢。
还有一个情况需要注意,箭头函数对上下文的绑定是强制的,无法通过call或aplly进行改变,如下段代码所示:
function widget() {
this.id=;
this.log=()=>{
console.log(this)
console.log('widget log',this.id);
}
}
var pseudoWidget={
id:
};
new widget().log.call(pseudoWidget);//123
上述代码会如何输出呢,由于箭头函数对上下文的绑定是强制的,因此this指向不会指向pseudoWidget对象,因此输出123。
箭头函数和传统函数的区别
1、箭头函数作为匿名函数,是不能作为构造函数的,不能使用new
如下段代码所示,我们使用new方法,会提示如下信息:
const B =()=>({wechat:"前端达人"});
let b = new B(); //TypeError: B is not a constructor
2、箭头函数不绑定arguments,可以使用剩余参数(rest)解决
function A(a){
console.log(arguments); //[object Arguments] {0: 1}
}
var B = (b)=>{
console.log(arguments); //ReferenceError: arguments is not defined
}
var C = (...c)=>{ //...c即为rest参数
console.log(c); //[3]
}
A();
B();
C();
3、箭头函数this指向具备穿透特性,会捕获其所在上下文的this值
4、箭头函数没有原型属性
var a = ()=>{
return '前端达人';
}
function b(){
return '前端达人';
}
console.log(a.prototype);//undefined
console.log(b.prototype);//object{...}
5、箭头函数不能当做Generator函数,不能使用yield关键字
6、箭头函数对上下文的绑定是强制的,无法通过call或aplly进行改变
小节
今天的内容就介绍到这里,我们可以看出使用箭头函能减少代码量,更加简介易读。在使用箭头函数时,我们一定要理解箭头函数和传统函数的区别,如果函数功能简单,只是简单的逻辑处理,尽量使用箭头函数。
const 有什么好处?
- 不被覆盖,被重写会报错,而函数声明会安静被覆盖
函数表达式与函数声明的对比?
- 前者需先前面写好,明确往代码前面找定义即可,后者可前可后,更灵活
- 前者可放块Block语句中,搭配更丰富,后者不行
同是函数表达式?
- 相比function, 箭头函数更简洁,并自带return,单个函数最多时节省14个字符(见回复2,
function+return+{}
vs=>
) - 箭头函数常用于函数式编程/闭包场景,特别是频繁在数组map、filter、reduce等中的使用
- 箭头函数更易读,更为主流,浏览器会往这方向优化
参考链接:
https://juejin.im/post/5c7bef126fb9a049c043c077
https://cnodejs.org/topic/5b95e6f74cdb88f72f5a920a
- 终端品牌域名过期被拍卖 价值六位数
- TensorFlow 深度学习笔记 TensorFlow实现与优化深度神经网络
- ASP.NET的路由系统:路由映射
- ASP.NET Core的配置(3): 将配置绑定为对象[上篇]
- ASP.NET的路由系统:URL与物理文件的分离
- 使用Excel分析CloudStack使用记录
- 卷积神经网络初探索
- TensorFlow 深度学习笔记 逻辑回归 实践篇
- 黑客是如何实施暴力破解的?
- Python的初学者你现在可以自己“看”到代码的运行了!
- ASP.NET Core的配置(3): 将配置绑定为对象[下篇]
- TensorFlow 深度学习笔记 从线性分类器到深度神经网络
- 微信版12306来了!用12306微信小程序买票靠谱吗
- 无需写try/catch,也能正常处理异常
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信小程序生命周期学习笔记-组件
- C语言入门系列之2.数据类型、运算符和表达式
- 树莓派的cpu与gpu通信设计浅析
- Python全栈(七)Flask框架之5.视图高级--类视图和蓝图
- Python全栈(六)项目前导之5.使用GitHub进行多人协同开发
- 附002.Nginx代理相关模块解析
- ApiBoot v2.3.x分支第一个版本发布,重构源码架构设计
- Python全栈(七)Flask框架之1.Flask简介与URL和视图介绍
- 两个CSS知识点:BFC和选择器权重
- C语言入门系列之9.预处理
- Python爬虫常见异常及解决办法
- 理解nodejs中js和c++的通信原理
- 如何使用FFmpeg将互联网直播点播平台内直播视频流转化为HLS流?
- 记一次nodejs问题排查
- 使用Go语言编译互联网视频直播点播平台EasyDSS出现ld returned 1 exit status错误