ES6中箭头函数的定义与调用方式详解


Posted in Javascript onJune 02, 2017

本文主要介绍的是关于ES6箭头函数的定义与调用方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

基本用法:

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

var f = v => v;

上面代码相当于:

var f = function( v ) { 
 return v; 
}

根据箭头函数有参数和无参数来区分

1、无参数的箭头函数

var f = () => 5;

等同于

var f = function() { return 5};

2、有参数的箭头函数

var sum = ( a, b) => a + b;

等同于

var sum = function( a, b) { 
 return a +b; 
}

有的函数体内的语句大于一条的话,它的写法如下使用一个大括号将其括起来,并使用return语句返回

var sum = (a, b) => { return a+b;}

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

var getFunction = id => ({id: id, anme: "Temp"});

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

const full = ({first, last}) => first +" "+ last;

等同于

function full(person) { 
 return person.first +" "+ person.last; 
}

使用箭头函数可以让函数表达的更加简洁

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

[1,2,3].map(function(x){ 
 return x*x; 
});

使用箭头函数的写法

[1,2,3].map(x => x*x);

另一个例子

var result = values.sort(function(a, b){ 
 return a -b; 
});

箭头函数的写法

var result = values.sort((a, b) => a-b);

使用rest参数与箭头函数结合的例子

const numbers = (...nums) => nums; 
numbers(1,2,3,4,5,6,7,8,9); //[1,2,3,4,5,6,7,8,9] 
//...nums 表示的是一个数组 
const headAndTail = ( head, ...tail) => [head, tail]; 
headAndTail(1,2,3,4,5,6,7,8,9);// [1, [2,3,4,5,6,7,8,9]]

使用箭头函数注意几点:

1、函数体内的this对象就是定义时所在的对象,而不是使用时所在对象;

2、不可以当作构造函数使用,也就是不能用new命令实例化一个对象,否则会抛出一个错误;

3、不可以使用arguments对象,该对象在函数体内不存在,如果要用的话,可以用rest参数代替;

4、不可以使用yield命令,箭头函数不能用作Generator函数;

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
使用JavaScript 实现各种跨域的方法
May 08 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
js实现上传图片到服务器
Apr 11 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 #Javascript
javascript实现延时显示提示框效果
Jun 01 #Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
vue.js 获取当前自定义属性值
Jun 01 #Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 #Javascript
vue快捷键与基础指令详解
Jun 01 #Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 #Javascript
You might like
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
JavaScript中的style.display属性操作
2013/03/27 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
python实现无证书加密解密实例
2014/10/27 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python zip函数打包元素实例解析
2019/12/11 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
《纸船和风筝》教学反思
2014/02/15 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
食品安全工作实施方案
2014/03/26 职场文书
卫生标语大全
2014/06/21 职场文书
汽修专业自荐信
2014/07/07 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
源码安装apache脚本部署过程详解
2022/09/23 Servers