今天来谈一下箭头函数, es6的新特性
首先我们来看下箭头函数长什么样子,
let result = (param1, param2) => param1+param2;
上述代码 按照以前书写应该是 :
function add(param1, param2){ return param1+param2; }
当 只有一个参数时,还可以简写为:
let result = v => 5+v;
箭头函数不支持 arguments
当有多个参数时,比如10个参数时, 我们就不能用arguments了,一种方法是 一一列举出来,比较繁琐, 还有一种方法是 用剩余参数表示 如下:
这里先解释一下 ” 剩余参数 “, MDN这样描述: 如果函数的最后一个命名参数以...为前缀,则在函数被调用时,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。
(param1, param2, ...rest)=>{//code} //...rest类型为数组,不包含param1,param2, rest.length表示剩余参数个数
arg代表的是 数组[3,6,5]
之前没用箭头函数写promise时,代码如下
function getRankData(){ return getUsers(users) .then(function(users){return users[1];}) .then(function(user){return user.id;}) .then(function(id){return data;}) .catch(function(err){return err.msg;}) }
用箭头函数简化后,
function getUserRankData(){ return getUsers(users) .then(users => users[1];) .then(user => user.id) .then(id => data) .then(err => err.msg;); }
当没有参数时, 箭头函数 () => {//code} 或者 _ => {//code}
note: 简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。
当 用箭头函数直接返回一个对象的时候 ()=>{name: 'test'} 会报错 , 需要添加一个括号, () => ({name: 'test'});
this 关键字
箭头函数内部的this
是词法作用域,由上下文确定。
看到箭头函数 经常和高阶函数一起使用, 如下
高阶函数有两个特性 : 函数可以作为参数传递, 函数可以作为返回值输出
var arr = [1,3,5,2,0]; var num = arr.map(ele => ele + 1) .filter(ele => ele > 3) .reduce((acc, ele) => acc + ele, 0)
结果为10;
介绍一下 reduce函数,对数组每个元素执行回调函数,返回值用于下一次计算参数,
reduce(function(a,b,c,d) , 0); reduce 有两个参数 一个回调函数,一个参数, 当参数存在时, 即为a 的初始值, 之后a为回调返回的值, b为数组当前的元素, c为当前元素序号值, d为调用reduce的数组。