常用的十个高阶函数

常用的十个高阶函数什么是高阶函数 高阶函数是对其他函数进行操作的函数 可以将它们作为参数返回他们 简单来说 高阶函数就是一个函数 它接受函数作为参数或将函数作为输出返回 1 函数可以作为参数 function num fn if typeof fn function fn

大家好,我是讯享网,很高兴认识大家。

什么是高阶函数

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

简单来说,高阶函数就是一个函数,它接受函数作为参数或将函数作为输出返回

1.函数可以作为参数

function num(fn){ if(typeof fn === "function"){ fn() } } //调用 num(function () {}) 

讯享网

2.函数可以作为返回值

讯享网function mun(){ return function (){} } //调用 const fn = mun() console.log(fn) 

JS中的高阶函数

1.map

  • map() 返回一个新的数组,数组中的元素为原始数组调用函数处理后的值
  • map() 不会对空数组检测

map() 方法回调函数接受3个参数:currentValue ,indexarray

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

有这么一个数组[12,20,30,50,60,74,96] 现有如下需求 ,把数组所有元素 * 2

let boo = [12,20,30,50,60,74,96]; let newBoo = boo.map(() =>{ return item *2; }); console.log(newBoo);//[24,40,60,100,120,148,192]

2.filter

  • filter() 方法创建一个新的数组,新数组中的元素通过检查指定数组中符合条件的所有元素
  • filter() 不会对空数组进行检测
  • filter() 不会改变原来的数组

filter() 方法的回调函数接受3个参数:currentValueindex array

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

有这么一个数组[10,20,30,40,50,60] 现有如下需求 ,返回数组中小于40的元素

讯享网let boo = [10,20,30,40,50,60]; let newBoo = boo.filter((item)=>{ return item < 40; }); console.log(newBoo);//[10,20,30]

3.forEach

  • forEach() 传入的函数不需要返回值,并将元素传递给回调函数
  • forEach() 对于空的数组不会执行回调函数
  • forEach() 不会返回新的数组,返回的是undefined

forEach() 方法的回调函数接受3个参数:currentValueindex array

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

有这么一个数组[10,20,30,40] 现有如下需求 ,打印数值中的元素及其索引值

let boo = [10,20,30,40]; let newBoo = arr.forEach((item,index) =>{ console.log(item,index); }); //10 0 //20 1 //30 2 //40 3

4.sort

  • sort() 方法用于对数组的元素进行排序
  • sort() 方法修改原来的数组

sort() 方法接受一个可选参数,用来规定排序顺序,必须是函数

有这样一个数组[2,1,10,16] 现有如下要求,从大到小进行排序

讯享网let boo = [2,1,16,10]; boo.sort(function(x,y) { if(x < y) { return -1 } if(x > y) { return 1 } return 0; }); console.log(boo);//[16,10,2,1] 

从小到大排序

let boo = [2,1,16,10]; boo.sort(function(x,y) { if(x < y) { return 1 } if(x > y) { return -1 } return 0; }); console.log(boo);//[1,2,10,16] 

5.some

  • some() 方法用于检测数组是否满足条件
  •  some()方法会依次执行数组的每个元素。
  • 如果有一个元素满足条件,则表达式返回 true, 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回 false 。
  • some()不会对空数组进行检测。
  • some()不会改变原来的数组。

forEach() 方法的回调函数接受3个参数:currentValueindex array


讯享网

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

现有这样一个数组[3,5,50,9,10] 判断数组中是否有大于10的元素

讯享网let boo =[3,5,50,9,10]; let newBoo = boo.some((item) => { return item > 10 }); console.log(newBoo);//true

6.every

  • every() 方法用于检测数组中所有元素都符合条件,如果数组中有一个元素不满足则返回false,其余元素不进行检测,如果都满足,则返回true。
  • some()不会对空数组进行检测。
  • some()不会改变原来的数组。

every() 方法的回调函数接受3个参数:currentValueindex array

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

现有这样一个数组[3,5,50,9,10] 判断数值中所有的数字大于51

let boo =[3,5,50,9,10]; let newBoo = boo.some((item) => { return item > 51 }); console.log(newBoo);//false

7.reduce

  • reduce() 方法接受一个函数作为累加器,数组中的每个值开始所见,最终计算为一个值
  • reduce() 对于空数组是不会执行回调函数

every() 方法的回调函数接受3个参数:prevcurrent,currentIndex arr

  1. currentIndex:必须。当前元素的索引
  2. prev :必须。函数传进来的初始值或上一次的返回值
  3. arr :可选。当前元素属于的数组本身
  4. current:必须。数组中当前处理的元素值。

现有这样一个数组[1,2,3,4,5] 现有如下需求,返回数组所有元素的和

讯享网let boo =[1,2,3,4,5]; let num = boo.reduce((prev,current) => { return prev+current; }); console.log(num);//15

8reduceRight

reduceRight() 方法 和 reduce()方法功能是一样的,不同是reduceRight() 方法 是从数组的末尾向前将数组中的元素做累加。

9.find

  • find() 方法用于查找一个符合条件的元素,如果找到则返回这个元素,否则返回undefined
  • find() 不会对空数组进行检测
  • find()不会改变原来的数组

find() 方法的回调函数接受3个参数:currentValueindex array

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

现有这样一个数组[20,30,40,50] 现有如下需求返回数组中大于40的元素

let boo =[20,30,40,50]; let newBoo = boo.find((item) => { return item > 40; }); console.log(newBoo);//50

10findIndex

findIndex()方法 和find() 方法类似,但findIndex()方法是返回这个元素的索引,如果没有找到则返回-1。

findIndex() 方法的回调函数接受3个参数:currentValueindex array

  1. currentValue :必须。当前元素的值
  2. index :可选。当前的索引值
  3. arr :可选。当前元素属于的数组对象

现有这样一个数组[10,20,25,60] 现有如下的需求返回数组中大于50的元素索引

讯享网let boo = [10,20,25,60]; let newBoo = boo.findIndex((item) => { return item > 50 }); console.log(newBoo);//3

小讯
上一篇 2025-02-21 20:04
下一篇 2025-03-28 15:58

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/122969.html