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

  • 2020 年 2 月 14 日
  • 笔记

函数

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

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 函数)

function add(a) {    return function(b) {      return a + b    }  }  add(1)(2)

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

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

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 能够将一个迭代函数有序地应用于一个数组中的每个元素,并返回一个长度相等的新数组

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 将一个数组中的元素精简为单一的值,该值是由每个元素与一个累计值通过一个函数计算得出的

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 能够遍历数组中的元素并过滤后返回一个新子集数组

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]