js常用的高阶函数

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

常用的高阶函数:

filter

filter()方法的作用是:接收一个函数,依次作用数组每个元素,并过滤符合函数条件的元素,将剩下的数组作为一个新数组返回。

通常使用方式:arr.filter(callback(), thisArg),更多详细介绍可以参考 MDN Array.filter()

参数

  • callback(ele, index, array) : 过滤条件的方法,当返回true则保存该元素,反之不保留,三个参数:
      1. ele 当前处理的元素
      1. index 当前处理的元素的索引,可选
      1. array 调用filter()方法的数组,可选
  • thisArg 执行 callback 时的用于 this 的值,可选

返回值
返回一个过滤剩下的元素组成的新数组。

过滤数值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x % 2 != 0);
// res => [1, 3, 5]
过滤不满足条件的值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x > 3);
// res => [4, 5, 6]
过滤null,underfined,空格
let arr = ['a', '', null, undefined, 'b', ''];
let tri = arr.filter(x => x && x.trim());
// tri => ["a", "b"]

map

map()方法的作用是:接收一个函数作为参数,对数组中每个元素按顺序调用一次传入的函数并返回结果,进行一些修改,不改变原数组,返回一个新数组
通常使用方式:arr.map(callback())
参数

  • arr : 需要操作的数组;
  • callback(currentValue, index, array, thisArg) : 处理的方法,四个参数;
      1. currentValue 当前处理的元素的
      1. index 当前处理的元素的索引,可选
      1. array 调用map()方法的数组,可选
      1. currentVthisArgalue 执行 callback 函数时使用的 this 值,可选

返回值
返回一个处理后的新数组。

let arr = [1, 3, -5];
let a1 = arr.map(Math.abs);  
// a1 => [1, 3, 5];

let a2 = arr.map(String);
// a2 => ["1", "3", "-5"]

reduce

reduce()方法的作用是:接收一个函数,对数组进行累加操作,把累计结果和下一个值进行操作,最后返回最终的单个结果值。

通常使用方式:arr.reduce(callback(), initValue),更多详细介绍可以参考 MDN Array.reduce()

参数

  • callback(returnValue, currentValue, currentIndex, array) : 累记器的方法,四个参数:
      1. returnValue 上一次处理的返回值,或者初始值
      1. currentValue 当前处理的元素的,可选
      1. currentIndex 当前处理的元素的索引,可选
      1. array 调用reduce()方法的数组,可选
  • initValue 初次调用callback()时候returnValue参数的初始值,默认数组第一个元素,可选

返回值
返回一个最终的累计值。

let arr = [1, 3, -5];
let sum1 = arr.reduce((res, cur) => res + cur);
// sum1 => -1

let sum2 = arr.reduce((res, cur) => res + cur , 1);
// sum1 => 0

除此之外,javascript还为数组提供了很多利用回调函数实现具体功能的方法

回调函数
方法 功能描述
find() 返回数组中满足回调函数的第一个元素的值,否则返回undefined
every() 测试数组中的元素是否都通过了回调函数的测试
forEach() 对数组中的元素都执行一次提供的函数
some() 测试数组中的某些元素是否通过了回调函数实现的测试

你可能感兴趣的:(javascript,前端)