个人中心
gpt4 book ai didi

聊聊 Javascript 常见的高阶函数

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章聊聊 Javascript 常见的高阶函数由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

聊聊 Javascript 常见的高阶函数

高阶函数，英文叫 Higher Order function。一个函数可以接收另外一个函数作为参数，这种函数就叫做高阶函数.

示例:

  1. function add(x, y, f) { 
  2.  return f(x) + f(y); 
  3. } 
  4.  
  5. //用代码验证一下： 
  6. add(-5, 6, Math.abs); // 11 

1、常见的高阶函数

ES6中数组新增了几种方法，其中 map、reduce、filter 几个都是高阶函数，除此，普通的sort也是高阶函数。分别介绍下新增的三个方法.

1.1、filter

filter 是过滤数组，返回满足条件的数据，组成一个新的数组返回，不满足条件的被丢弃.

实例1：取出数组中小于 100 的数据，放到一个新数组中 。

  1. let grad = [ 102, 188, 55, 66, 200, 800 ] 
  2. let arr2 = grad.filter( function(item){ 
  3.  return item <= 100 
  4. }) 
  5. console.log("arr2",arr2)// 55, 66 

上述实例中，filter传入的参数是一个函数，传入的函数依次作用于每个元素，然后根据返回值是 true 或 false 决定保留还是丢弃元素。因为只有 55 66 两个满足条件，所以新的数组中只有这两个元素.

1.2、map

map 是映射的意思.

原数组被映射成一个新的数组，返回值是一个新数组，不改变原来的数组。新的数组与原数组的长度是不会改变的.

实例2：给数据每个元素放大 2 倍.

  1. let arr2 = [ 55, 66 ] 
  2. let arr3 = arr2.map( item => { 
  3.  return item*2 
  4. }) 
  5. //返回结果 [ 110, 132 ] 

上述实例，map接收的参数是一个函数，该函数依次作用于每个元素，对元素放大了2倍，也可以对其进行任意的复杂操作.

1.3、reduce

reduce 是对数组进行汇总的，往往进去一个数组，出来是一个数据。经常用于求和和计算平均值.

实例3：对上个实例返回的结果进行求和.

  1. let sum = arr3.reduce((tmp,item)=>{ 
  2.  return tmp+item 
  3. }) 
  4. //返回结果 242 

重点来了，如果我们想把上边三个实例合并到一起执行，最终我们可以写得有多简单呢？

  1. // 复杂写法 
  2. let grad = [102,188,55,66,200,800] 
  3. let arr2 = grad.filter(function(item){ 
  4.  return item <= 100 
  5. }) 
  6. let arr3 = arr2.map(item=>{ 
  7.  return item*2 
  8. }) 
  9. let sum = arr3.reduce((tmp,item)=>{ 
  10.  return tmp+item 
  11. }) 
  12.  
  13. //简单写法 
  14. let sum2 = grad 
  15.            .filter( item => {return item <= 100}) 
  16.           .map(item=>{return item*2}) 
  17.           .reduce((tmp,item)=>{return tmp+item}) 

原文链接：https://www.toutiao.com/a7005124973257851424/ 。

最后此篇关于聊聊 Javascript 常见的高阶函数的文章就讲到这里了,如果你想了解更多关于聊聊 Javascript 常见的高阶函数的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

27 4 0
文章推荐： 面试官：说说你对 TypeScript 中泛型的理解？应用场景？
文章推荐： Win10电脑怎么彻底卸载系统自带的Edge浏览器？
文章推荐： hiberfil.sys可以删除吗？win10系统中hiberfil.sys文件删除方法
文章推荐： 网络共享找不到网络路径的解决方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com