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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
jQuery使用方法
Feb 04 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js调用css属性写法
2013/09/21 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
token 机制和实现方式
2020/12/15 Javascript
python中from module import * 的一个坑
2014/07/20 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python3.6简单反射操作示例
2018/06/14 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
经典C++面试题一
2016/11/06 面试题
小学美术教学反思
2014/02/01 职场文书
人事任命书范文
2014/06/04 职场文书
优秀员工推荐材料
2014/12/20 职场文书
会计求职简历自我评价
2015/03/10 职场文书
人力资源部工作计划
2019/05/14 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript