js高级进阶之高阶函数篇

学会高阶函数是每一个前端开发者走向高级阶段的必经之路，虽然你可以在业务代码中不去使用，但你总需要去读懂别人的代码吧，如果你不熟悉这些高阶使用方法，必然会遭到鄙视嘲笑，甚至强行复制粘切不明大意的胡乱修改会带来灾难性的后果，当然学习高阶函数也不仅仅是要去使用几个高阶函数方法，最主要的是领略其设计思想，为自己之后写出牛逼点的代码做基础。

高阶函数概念

一等函数
您可能听说过JavaScript将函数视为一等公民。那是因为在JavaScript或任何其他函数式编程语言中，函数是对象。

在JavaScript中，函数是一种特殊类型的对象。他们是Function对象。
在JavaScript中，您可以使用其他类型（如对象，字符串或数字）执行的所有操作函数都可以执行。您可以将它们作为参数传递给其他函数（回调函数），将它们分配给变量并传递它们等等。这就是JavaScript中的函数被称为First-Class函数(一等函数)的原因。
与之相对应的就是：

高阶函数
高阶函数是对其他函数进行操作的函数，可以将它们作为参数或通过返回它们。简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。

js中常见的高阶函数

map

定义：map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

注意：map()不会对空数组进行检测，map()不会改变原始数组

语法：array.map(function(currentValue, index, arr), thisIndex)

参数说明：

function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：

currentValue：必须。当前元素的的值。
index：可选。当前元素的索引。
arr：可选。当前元素属于的数组对象。

thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

实例打印结果：

let indexValue = [6,7,8];
let resultArry = arry.map(function(currentValue, index, arr){
    console.log("currentValue: "+currentValue);
    console.log("index: "+index);
    console.log("arr: "+arr);
    console.log("indexValue: "+indexValue);
    console.log("this: "+this);
    console.log("----------------------------------------")
},indexValue)
VM1084:4 currentValue: 2
VM1084:5 index: 0
VM1084:6 arr: 2,3,4
VM1084:7 indexValue: 6,7,8
VM1084:8 this: 6,7,8
VM1084:9 ----------------------------------------
VM1084:4 currentValue: 3
VM1084:5 index: 1
VM1084:6 arr: 2,3,4
VM1084:7 indexValue: 6,7,8
VM1084:8 this: 6,7,8
VM1084:9 ----------------------------------------
VM1084:4 currentValue: 4
VM1084:5 index: 2
VM1084:6 arr: 2,3,4
VM1084:7 indexValue: 6,7,8
VM1084:8 this: 6,7,8
VM1084:9 ----------------------------------------

可以清楚的看到以上各个参数在运行过程的值。

经典应用：求数组各项平方：

let a = [0,1,2,3];

let aSquare = a.map(x=>x*x);

console.log(aSquare)//[0, 1, 4, 9]

reduce

定义:

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose,见“js高级进阶之compose与pipe”。

注意: reduce() 对于空数组是不会执行回调函数的和map一样。

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

参数说明：

function(total,currentValue, index,arr)：必需。用于执行每个数组元素的函数。函数参数:

		total	必需。初始值, 或者计算结束后的返回值。
		currentValue	必需。当前元素
		currentIndex	可选。当前元素的索引
		arr	可选。当前元素所属的数组对象。

实例打印每个参数的值：

let b = [10,100,1000];
let initialValue = [10,20]

let res = b.reduce(function(total, currentValue, currentIndex, arr){
    console.log("total:"+total);
    console.log("currentValue:"+currentValue);
    console.log("currentIndex:"+currentIndex);
    console.log("arr:"+arr);
    console.log("initialValue:"+initialValue);
    console.log("------------------------------");
}, initialValue)
VM1169:5 total:10,20
VM1169:6 currentValue:10
VM1169:7 currentIndex:0
VM1169:8 arr:10,100,1000
VM1169:9 initialValue:10,20
VM1169:10 ------------------------------
VM1169:5 total:undefined
VM1169:6 currentValue:100
VM1169:7 currentIndex:1
VM1169:8 arr:10,100,1000
VM1169:9 initialValue:10,20
VM1169:10 ------------------------------
VM1169:5 total:undefined
VM1169:6 currentValue:1000
VM1169:7 currentIndex:2
VM1169:8 arr:10,100,1000
VM1169:9 initialValue:10,20
VM1169:10 ------------------------------

reduce实例应用数组求和

let b = [10,100,1000];
let sum = b.reduce((total,currentValue)=>total+=currentValue,0);
console.log(sum)//1110

假设我们希望求数字10000与数组 b 中元素的和呢，那就这么写：

let b = [10,100,1000];
let sum = b.reduce((total,currentValue)=>total+=currentValue,10000);
console.log(sum)
VM1268:3 11110

reduce实例应用数组去重

let c = [1,2,3,2,1,null,null]

let result = c.reduce((ac,current)=>{
   return ac.includes(current)?ac : ac.concat(current);
},[])
console.log(result);

reduce实例应用数组降维

let d = [[1,2],[3,4],[5,6]];

let cd = d.reduce((total,current)=>{
    return total.concat(current)
},[])

console.log(cd)
VM140:8 (6) [1, 2, 3, 4, 5, 6]

filter

定义和用法：
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

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

参数说明：

function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数函数参数:

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

thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
如果省略了 thisValue ，“this” 的值为 “undefined”

实例应用打印参数值

let as =[2,3,3,3,6];
let thisValue = 0;

as.filter(function(currentValue,index,arr){
    console.log("currentValue:"+currentValue);
    console.log("index:"+index);
    console.log("arr:"+arr);
    console.log("initialValue:"+thisValue);
    console.log("------------------------------");
}, thisValue)
VM194:5 currentValue:2
VM194:6 index:0
VM194:7 arr:2,3,3,3,6
VM194:8 initialValue:0
VM194:9 ------------------------------
VM194:5 currentValue:3
VM194:6 index:1
VM194:7 arr:2,3,3,3,6
VM194:8 initialValue:0
VM194:9 ------------------------------
VM194:5 currentValue:3
VM194:6 index:2
VM194:7 arr:2,3,3,3,6
VM194:8 initialValue:0

实例应用数组去除偶数值

let as =[2,3,4,5,6];
as.filter((current,index)=>{
   return  current%2 == 0
})
(3) [2, 4, 6]

flat

数组扁平化处理----降维

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]