JavaScript高阶函数

更新日期: 2020-01-10阅读: 1.9k标签: 函数

概念

Javascript中的函数本质上都指向某个变量,既然变量可以指向函数,函数的参数可以接受变量,那么函数是不是可以可以作为另一个函数的入参?因为Javascript是一门弱类型语言,不会对函数输入值和函数的输出值进行强定义和类型检查。所以函数可以作为参数,也可以作为输出值

一个最简单的高阶函数:

let add=(x,y,f)=>f(x)+f(y);

对其他函数进行操作的函数,可以将他们作为参数或返回它们。


高阶函数分类

  • 函数作为参数传递
  • 函数作为返回值

map/reduce/filter

map

定义:map() 方法返回一个新数组,不会改变原始数组。同时新数组中的元素为原始数组元素调用函数处理后的值,并按照原始数组元素顺序依次处理元素。

语法:array.map(function(currentValue /*必填,当前元素的值 */,index /*可选,当前元素的索引*/,arr /*可选,当前元素属于的数组对象*/), thisValue /*可选,上下文对象,用作this,默认为全局对象*/)

有以下需求:创建一个新数组,其中的值是原数组的值的两倍。

const arr=[1,2,3]
let fn=(arr)=>{
  let temp=[]
  for(let i=0;i<arr.length;i++){
    temp.push(arr[i]*2)
  }
  return temp;
}
console.log(fn(arr))

以上是我们的命令式编程,我们改写下:

const temp=[1,2,3].map(item=>item*2)
console.log(temp)

在这里我们使用(item)=>item*2作为map函数的参数。

手动实现map(),遍历函数的每一项作为函数的入参,并返回每次函数调用结果组成的数组

关键:1.函数为空,返回空 2.func 必须是函数类型,需要有return值,否则会出现所有项映射为undefind 3.无副作用
Array.prototype.mapTest = function (func, content) {
  if (typeof func !== 'function') throw new TypeError(
    `${typeof func} is not a function`)
  let arrTemp = this.slice()
  content = typeof content === 'undefined' ? null : content
  let result = []
  for (let idx = 0; idx < arrTemp.length; idx++) {
    result.push(func.call(content, arrTemp[idx], idx, arrTemp))
  }
  return result
}

reduce

定义:reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

语法:array.reduce(function(total /*必需。初始值, 或者计算结束后的返回值*/, currentValue/*必需。当前元素*/, currentIndex/*可选。当前元素的索引*/, arr/*可选。当前元素所属的数组对象。*/), initialValue/*可选。传递给函数的初始值*/)

有以下需求:对数组arr的项进行求和

let arr=[1,2,3,4]

// 命令式编程
let sum=arr=>{
  let temp=0;
  for(let idx=0;idx<arr.length;idx++){
    temp+=arr[idx]
  }
  return temp
}
//使用reduce
let total=arr.reduce((prev,cur)=>{
  return prev+cur
},0)

过程分析:

第一次执行时,prev的值为我们的初始值0,返回0+cur(当前数组的第一位)作为第二次执行时的prev….从而达到累加的目的;

手动实现一个reduce(),核心就是遍历数组每一项参与函数运算并将返回值作为下次遍历的初始值,从而实现累加。

关键点:1.无初始值时,从原数组的第二项进行遍历 2.无副作用
Array.prototype.reduceTest = function(func, initVal, directionLeft = true) {
  if (typeof func !== 'function') throw new TypeError(`${typeof func} is not a function`)
  if (!this.length) {
    if (typeof initVal !== 'undefined') {
      return initVal
    } else {
      throw new Error('Reduce of empty array with no initial value')
    }
  }
  let array = this.slice()
  let hasInitVal = typeof initVal !== 'undefined'
  let value = hasInitVal ? initVal : array[0]
  if (directionLeft === false) {
    array = array.reverse()
  }
  for (let idx = hasInitVal ? 0 : 1; idx < array.length; idx++) {
    const cur = array[idx]
    value = func.call(null,value, cur, idx, array)
  }
  return value
}

filter

定义:filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

语法:array.filter(function(currentValue/*必须。当前元素的值*/,index/*可选。当前元素的索引值*/,arr/*可选。当前元素属于的数组对象*/), thisValue/*可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值*/)

需求:过滤出对象数组中age大于10的元素

let persons = [
  { 'name': 'Bob', age: 12 },
  { 'name': 'Lily', age: 13 },
  { 'name': 'Tom', age: 9 },
  { 'name': 'Jone', age: 99 },
]

// 命令式编程
let result=()=>{
  let res=[];
  for(let idx=0;idx<persons.length;idx++){
    if(persons[idx].age>10){
      res.push(persons[idx])
    }
  }
  return res;
}
// 使用filter
let filterResult=persons.filter(item=>item.age>9);

手动实现一个filter(),核心就是创建一个新的数组,新数组中的元素是原数组中符合条件的项

关键点:1.函数返回值为true/false 2.无副作用
Array.prototype.filterTest=function (func,content) {
  if (typeof func !== 'function') throw new TypeError(`${typeof func} is not a function`)
  if (!this.length) return []
  content = typeof content === 'undefined' ? null : content
  let result=[]
  for(let idx=0;idx<arr.length;idx++){
    let res=func.call(content,arr[idx],idx,arr)
    if(res){
      result.push(arr[idx])
    }
  }
  return result
}

flat

注意:普通浏览器(仅Chrome v69,Firefox Nightly和Opera 56等)/Node.js (需V11.0.0及以上) 尚未实现flat方法。这是一项实验性功能。 [MDN 说明以及替代方案]

用法:将目标嵌套数组扁平化,变为新的一维数组

语法:arrry.flat([depth]/*指定要提取嵌套数组的结构深度,默认值为 1。Infinity为无限*/)

手动实现一个flat()

/**
 * 数组扁平化
 * @param depth 拉平深度 默认为1,最大为Infinity
 */
Array.prototype.flatTest = function (depth = 1) {
  let arr = this.slice()
  const result = []
  // 当前已拉平层数 
  let flattenDepth = 1;
  // 先拉平第一层
  (function flatten (list) {
    list.forEach((item) => { 
      if (flattenDepth < depth &&Array.isArray(item)) {
        flattenDepth++
        flatten(item)
      } else {
        result.push(item)
      }
    })
  })(arr)
  return result
}


总结

高阶函数本质上就是对算法的高度抽象,通过提高抽象度,实现最大程度代码重构


链接: https://www.fly63.com/article/detial/8154

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!