常用的十个高阶函数

什么是高阶函数

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

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

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 ，index 和 array

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个参数：currentValue ，index 和 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个参数：currentValue ，index 和 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个参数：currentValue ，index 和 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个参数：currentValue ，index 和 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个参数：prev，current，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个参数：currentValue ，index 和 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个参数：currentValue ，index 和 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