es6函数之箭头函数用法实例详解


Posted in Javascript onApril 25, 2020

本文实例讲述了es6函数之箭头函数用法。分享给大家供大家参考,具体如下:

es6允许使用“箭头”(=>)定义函数。

var f = v => v
// 等同于
var f = function(v) {
 return v
}

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5
// 等同于
var f = function() {
 return 5
}

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
 return num1 + num2
}

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => {return num1 + num2}

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// 报错
let getTempItem = id => {id: id, name: "Temp"}
// 不报错
let getTempItem = id => ({id: id, name: "Temp"})

下面是一种特殊情况,虽然可以运行,但会得到错误的结果。

let foo = () => {a: 1}

上面代码中,原始意图是返回一个对象{a: 1},但是由于引擎认为大括号是代码块,所以执行了一行语句a: 1,这时,a可以理解为语句的标签,因此实际执行了语句是1,然后函数就结束了,没有返回值。

如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。

let fn = () => void doesNotReturn()

箭头函数可以与变量解构结合使用。

const full = ({first, last}) => first + ' ' + last
// 等同于
function full(person) {
 return person.first + ' ' + person.last
}

箭头函数使用表达更简洁。

const isEven = n => n % 2 === 0
const square = n => n * n

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1, 2, 3].map(function(x) {
 return x * x
})
// 箭头函数写法
[1, 2, 3].map(x => x * x)

下面是rest参数与箭头函数结合的例子。

const numbers = (...nums) => nums

numbers(1, 2, 3, 4, 5)

const headAndTail = (head, ...tail) => [head, tail]

headAndTail(1, 2, 3, 4, 5)

使用注意点

1)函数体内的this对象,就是定义所在的对象,而不是使用时所在的对象。
2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3)不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用rest参数代替。
4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

function foo () {
 setTimeout(() => {
 console.log('id: ', this.id)
 }, 100)
}

var id = 21

foo.call({id: 42})

上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100ms后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象,所在输出的是42.

箭头函数根本没有自己的this,导致内部的this就是外层代码块的this,正是因为它没有this,所以也就不能用作构造函数。

除了this,以下三个变量在箭头函数之中也是不存在的:

arguments, super, new.target

别外,由于箭头函数没有自己的this,所以当然也就不能用call(),apply(),bind()这些方法去改变this的指向。

(function() {
 return [
 (() => this.x).bind({x: 'inner'})()
 ]
}).call({x: 'outer'})

不适用场合

由于箭头函数使得this从“动态”变成“静态”,下面两个场合不应该使用箭头函数。

第一个场合是定义函数的方法,且该方法内部包括this.

window.lives = 100
var cat = {
 lives: 9,
 jumps: () => { this.lives--; console.log(this.lives)}
}

// 99

上面代码中,cat.jumps()方法是一个箭头函数,这是错误的。调用cat.jumps()时,如果是普通函数,该方法内部的this指向cat;如果写成上面那样的箭头函数,使得this指向全局对象,因些不会得到预期结果。

第二个场合是需要动态this(事件监听)的时候,也不应该使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
 this.classList.toggle('on');
});

上面代码运行时,点击按钮会报错,因为button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
深入分析javascript中console命令
Aug 14 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
es6函数之尾递归用法实例分析
Apr 25 #Javascript
javascript 易错知识点实例小结
Apr 25 #Javascript
javascript执行上下文、变量对象实例分析
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 #Javascript
You might like
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
页面使用密码保护代码
2013/04/10 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
JS高级运动实例分析
2016/12/20 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python 多线程实例详解
2017/03/25 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
打架检讨书400字
2014/01/17 职场文书
带薪年假请假条
2014/02/04 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Django中的JWT身份验证的实现
2021/05/07 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python