箭头函数还有三个值得关注能力

有关箭头函数的使用,相信用过 ES6 语法的同学都或多或少接触过,最常用的能力就是写函数时省掉了 function 部分。其实箭头函数有很多有可以利用的能力。它的写法在不同的场景上也是非常有用的。今天,我来给大家推荐有关箭头函数三种不一样的能力。

一. 创建可复用的路径

const object = {
  'a': [{
    'b': {
      'c': 3
    }
  },4]
}

const arr = [
  obj => obj.a[0].b.c,
  obj => obj.a[1]
].map(path = > path(object));

console.log(arr)

这段代码能够很好的说明创建可复用的路径。因为最后得到的 arr 就是一个数组[3, 4]。
如果第一个参数 obj 的值是 obj.a[0].b,那么数组输出的就是[{c: 3}, 4]。
这就是创建可复用的路径。

二. 编写链式调用

const pipe = functions => data => {
  return functions.reduce(
    (value, func) => func(value),
    data)
}

const pipeline = pipe([
  x => x * 2,
  x => x / 3,
  x => x > 5,
  b => !b
])

console.log(pipeline(5))  // true
console.log(pipeline(20)) // false

链式调用就更有意思了,如上代码所示,数组里的值会逐个执行再返回给下一个函数执行。当然,这里需要注意 reduce 的使用规则。

三. 多重嵌套简化

先来一个简单:

const func = p => v;
//相当于
const func = function(p) {
  return v;
}

上面这个简化的写法,相信大家一定比较熟悉,当只有一个参数,一个 return 返回时可以直接使用箭头函数简写。

下面看一下多重嵌套的简化 。

const func = a => b => c => a + b + c;
//相当于
const func = function(a) {
  return function(b) {
    return function(c) {
      return a + b + c
    }
  }
}
console.log(func(1)(2)(3)) // 6

可以和第一个同样理解,只是加了一个多重嵌套而已。

© 版权声明
THE END
打赏一根烟,继续保持。
点赞1打赏作者 分享
评论 抢沙发
头像
友好交流,请勿发纯表情,请勿灌水,违者封号喔
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容