一定要知道的JavaScript高阶函数

520 阅读4分钟

这是我参与更文挑战的第20天,活动详情查看 更文挑战

什么是高阶函数?

JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。

map

定义

原数组被“映射”成对应新数组。

image.png

语法

array.map(function(currentValue,index,arr), thisValue)

image.png

注意

  • map() 参数必须是函数

  • 不会改变原数组,返回调用函数处理后一个新数组,长度等于原数组长度

  • 不会对空数组进行遍历

  • 函数接收三个参数

示例

let arr = [1, 2, 3]
let newArr = arr.map((currentValue, index, arr) => {
    //currentValue:遍历数组的每一项,index:数组当前项的下标,arr原数组
    console.log(`item---${currentValue}, index---${index}, arr---${arr}`)
    return currentValue + index
})
console.log(newArr)

image.png

示例一:求平方

假设有一个函数f(x)=x²;

作用在一个数组[1,2,3,4,5,6,7,8,9]

function square(x){
  return x * x;   
}
var arr = [1,2,3,4,5,6,7,8,9];

普通遍历实现

var result = [];
for(var i=0; i<arr.length; i++){
  result.push(square(arr[i]))   
}

image.png

map改写

arr.map(square);

image.png

map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到一个新的Array作为结果。

map传入的参数时square,即函数本身

示例二:数字转化

将数组的所有数字转化为字符串。 image.png

reduce

定义

将数组元素计算为一个值(从左到右)

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

image.png

注意

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

  • 作为一个高阶函数,用于函数的 compose

  • 对于空数组不会执行回调函数

示例一:数组求和

// 数组求和
var arr = [1, 2, 3, 4, 5]
var total = arr.reduce(function (prev, next) {
    return prev + next
}, 0)

 将0当做reduce回调函数中的初始值,然后依次累加

image.png

示例二:数组去重

// 数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 8]
var newArr = arr.reduce(function (prev, next) {
    prev.indexOf(next) == -1 && prev.push(next)
    return prev
}, [])

初始化一个空数组,判断下一个元素是否在当前数组中,不存在则添加到当前数组中

image.png

示例三:数组最大最小值

// 获取数组中最大值
var arr = [985, 666, 33, 22, 989855, 1, 336699, 666888, 123456789]
var max = arr.reduce(function (prev, next) {
    return Math.max(prev, next)    // Math.min(prev, next)
}, 0)

将0当做reduce回调函数中的初始值,假如该值不存在时,则回调函数的初始值为数组中的第一项,即回调函数中的prev值。

image.png

如果不写初始值

image.png

filter

定义

把Array的某些元素过滤掉,然后返回剩下的元素(即通过检查符合条件的所有元素)

语法

array.filter(function(currentValue,index,arr), thisValue)

image.png

注意

  • 和map不同的是filter把传入的函数作用于每一个元素,然后根据返回值是true和false决定保留还是丢掉该元素。

  • 不会改变原始数组。

示例一:数组去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'Axjy','Axjy',true,true,15];
console.log(unique(arr))

image.png

示例二:筛选出所有偶数

let arr = [56, 15, 48, 3, 7];
let newArr = arr.filter(function (value, index, array) {
    return value % 2 === 0; //return value % 2 !== 0;(奇数)
});
console.log(newArr)

image.png

示例三:删掉数组的空字符串

 let arr = ['A', '', 'B', null, undefined, 'C', '  '];
 let r = arr.filter(function (s) {
     return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
 });
  // ['A', 'B', 'C']

image.png

sort

定义

对数组的元素进行排序。

语法

array.sort(sortfunction)

image.png

注意

  • sort()方法的默认排序规则,字符串是根据ASCII码进行排序,默认把所有元素先转换为String再排序。

image.png

  • 数组在原数组上进行排序,不生成副本,会改变原始数组!

示例一:数字排序

var points = [40,100,1,5,25,10];
points.sort(function(a,b){
   return a-b  //return b-a (降序)
});

返回的是差值,如果是小于0的值,就会将a排在前面,如果大于0,就会将b排在前面,如果是0的话,就随便。(冒泡排序法!!)

image.png


小可爱看完就点个赞再走吧!🤞🤞🤞