前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高阶函数及 map、reduce、filter 的实现

高阶函数及 map、reduce、filter 的实现

原创
作者头像
Krry
修改2020-02-11 11:17:00
修改2020-02-11 11:17:00
1.1K0
举报
文章被收录于专栏:Krryblog

博客地址:https://ainyi.com/85

2020 开年国家经历了不少困难,最为凶猛的局势就是新型冠状病毒的蔓延,国务院最终决定春节假期延长至==2 月 2 号==;公司决定 3 - 7 号在家用 V** 办公。10 号正式在职场上班;

在这个看似漫无止境的春节假期中,在家宅着不出门就是对社会最好的贡献,那么一直待在家也确实无聊极致,索性学习学习、看看书吧,再学习学习 JavaScript 的函数吧

函数

函数是函数式编程的工作单元与中心。函数是任何可调用你且可通过 () 操作求值的表达式。

JavaScript 函数有两个支柱性的重要特性:一等函数和高阶函数

一等函数就是最常见的,如:

代码语言:javascript
复制
function multiplier(a, b) {
  return a * b
}

let square = function(x) {
  return x * x
}

// lambda 表达式(箭头函数)
let square = x => x * x

主要说说高阶函数

高阶函数

鉴于函数的行为与普通对象类似,其理所当然地可以作为其他函数的参数进行传递,或是由其他函数返回。这些函数则称为高阶函数。~JavaScript函数式编程指南p36~

例如 Array.sort 的 comparator 函数就是高阶函数(传送门:https://ainyi.com/41 -> sort 函数)

代码语言:javascript
复制
function add(a) {
  return function(b) {
    return a + b
  }
}
add(1)(2)

上面例子,add 函数接收一个参数,并返回另一个接收第二个参数并把它们加在一起的函数

函数柯里化能够很好地体现高阶函数的应用

代码语言:javascript
复制
function currying(fn, length) {
  length = length || fn.length; 	
  return function (...args) {			
    return args.length >= length	
    	? fn.apply(this, args)			
      : currying(fn.bind(this, ...args), length - args.length) 
  }
}

const add = currying(function(a, b, c) {
    console.log([a, b, c].reduce((a, b) => a + b))
})

add(1, 2, 3) // 6
add(1, 2)(3) // 6
add(1)(2)(3) // 6
add(1)(2, 3) // 6

兼容各种 add 调用的高阶函数

详情看我之前写的文章 js 高阶函数之柯里化

map、reduce、filter

此三种函数均为高阶函数,如何实现这三个函数,接下来看看。

一般重写对象的实例方法是通过 prototype,数组的所有实例方法、属性都保存在 Array.prototype。只不过平常都是通过该对象的实例调用

通过 .实例方法,该实例方法的 this 指针指向 它

map 的实现

高阶函数 map 能够将一个迭代函数有序地应用于一个数组中的每个元素,并返回一个长度相等的新数组

代码语言:javascript
复制
function map(fn) {
  let idx = -1,
      len = this.length,
      result = new Array(len)

  while (++idx < len) {
    result[idx] = fn(this[idx], idx, this)
  }
  console.log('myself')
  return result
}
Array.prototype.map = map;
[1, 2, 3].map(ele => `#${ele}#`)
// myself
// ["#1#", "#2#", "#3#"]

reduce 实现

高阶函数 reduce 将一个数组中的元素精简为单一的值,该值是由每个元素与一个累计值通过一个函数计算得出的

代码语言:javascript
复制
function reduce(fn, accumulator) {
  let idx = -1,
      len = this.length

  if (!accumulator && len > 0) {
    accumulator = this[++idx]
  }

  while (++idx < len) {
    accumulator = fn(accumulator, this[idx], idx, this)
  }
  console.log('myself')
  return accumulator
}
Array.prototype.reduce = reduce;
[1, 2, 3].reduce((n, p) => n + p)
// myself
// 6

// 也可以指定第一个累计值
[1, 2, 3].reduce((n, p) => n + p, 100)
// myself
// 106

filter 的实现

高阶函数 filter 能够遍历数组中的元素并过滤后返回一个新子集数组

代码语言:javascript
复制
function filter(fn) {
  let idx = -1,
      len = this.length
      result = []

  while (++idx < len) {
    let value = this[idx]
    if (fn(value, idx, this)) {
      result.push(value)
    }
  }
  console.log('myself')
  return result
}
Array.prototype.filter = filter;
[1, 2, 3].filter(ele => ele >= 2)
// myself
// [2, 3]

博客地址:https://ainyi.com/85

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 函数
  • 高阶函数
  • map、reduce、filter
    • map 的实现
      • reduce 实现
        • filter 的实现
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档