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 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
js实现楼层导航功能
Feb 23 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
js实现简易拖拽的示例
Oct 26 Javascript
如何用JavaScipt测网速
May 09 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
php session和cookie使用说明
2010/04/07 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
Textarea根据内容自适应高度
2013/10/28 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
Javascript函数的参数
2015/07/16 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
用matplotlib画等高线图详解
2017/12/14 Python
浅析Python数据处理
2018/05/02 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
见习期自我鉴定
2013/11/07 职场文书
员工评语大全
2014/01/19 职场文书
经典公益广告词
2014/03/13 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
天网工程实施方案
2014/03/26 职场文书
保密承诺书
2014/03/27 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
出生公证书
2015/01/23 职场文书
小学校长个人总结
2015/03/03 职场文书
公司酒会主持词
2015/07/02 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
关于Numpy之repeat、tile的用法总结
2021/06/02 Python