JavaScript中的高阶函数详解

JavaScript 中，我们在定义函数的时候，可以把函数赋值给变量，同样函数内部其实也是指向变量，既然函数能指向变量，变量能接受函数，那么函数的参数也能携带函数。我们称参数中携带着函数的参数为高阶函数（Higher-order function）。JavaScript 中常见的高阶函数有以下几种。

一、map函数

map函数是JavaScript中已经定义好的函数，只需要拿来用就行。就像众多前端框架。map函数只针对数组，只对数组起作用，用到其他对象会报错，会提示说该函数没被定义。map函数作用在数组中，是分别对数组里面的元素进行遍历处理。说map是高阶函数，是因为map的参数中可以是函数。通过参数中携带的函数对数组进行自定义的处理。map函数返回的也是一个数组。

例如：

var arr = [1,2,3,4,5,6];
var person = {
name:12,
age:18
}
function ii(x){//map调用的函数
return x*x;
}
console.log(arr.map(ii));//[1, 4, 9, 16, 25, 36]

console.log(arr.map(String))//数组元素分别转字符串类型

var arr1 = ["1","2","3"];//定义一个字符串类型的数组
console.log(arr1.map(Number));//[1, 2, 3]

二、reduce高阶函数

reduce函数其实和map函数相似，都是针对数组张开的操作，是数组特有的方法函数。reduce（）接收两个参数，返回的结果作为第一个参数，第一个参数再继续和第二个参数进行运算。

表达式如下：

[x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x4);

可以这样理解：

结合例子，例如：

var arr = [1,2,3,4,5,6];//定义数组
function fun(x,y){
return x*10+y;
};
console.log(arr.reduce(fun));//123456


var arr1 = ['A','B','C'];
function low(a,b){
return a.toLowerCase()+b.toLowerCase();
}
console.log(arr1.reduce(low));//abc

三、filter函数

filter高阶函数和之前的之前提到的map高阶函数和reduce高阶函数一样，都是只针对数组的函数，用于筛选数组的元素，返回剩下的元素数组。filter函数把传入的函数依次作用于Array的元素，根据返回的值return ture或者是return false是否保留还是舍弃该元素。默认情况下是return false，就是筛选掉满足条件的元素，返回剩下的元素。

另外，filter函数接收多个参数，通常第一个参数标示数组元素，第二个参数标示数组索引，第三个参数标示数组本身。

例如：

var b = [1,2,3,4,5,6,7,8];
var c = b.filter(function(x){
return x%2!==0;

})
console.log(c);//[1, 3, 5, 7]


var arr3 = ['A','B','C'];
var a = arr3.filter(function(element,index,self){//filter接受的回调函数，第一个参数指向元素，第二个参数指向索引，第三个参数指向数组本身
console.log(element);//数组元素
console.log(index);//索引
console.log(self);//输出数组自身
// return false;//筛选掉上面的元素后返回空数组
return true;//保留元素，返回数组
});
console.log(a)// ["A", "B", "C"]

四、sort函数

1、ASCII编码标准

sort高阶函数是自定义对数Array进行排序。那是依据什么排序的呢？大小？我们知道Array数组元素可以是字符串，那字符串之间怎么比较大小排序？

我们来看看下面的例子：

var arr = ['null','String','number','undefined','Object'];
console.log(arr.sort());//["Object", "String", "null", "number", "undefined"]
var arr1 = [11,8,32,22];
console.log(arr1.sort());//[11, 22, 32, 8]

你是否蒙了？不知所措？sort（）到底是根据什么排序的？其实sort（）函数是根据ASCII编码排序的？什么是ASCII编码？ASCII编码是把数字、字母（包含字母大小写）和其他符号（例如：例如*、#、@等），所有的数据在进行运算时都要转换成二进制数来表示的标准。所以上面的例子中，无论是比较字符串还是比较数字，都会先转换成二进制再进行比较。

那问题来了，我怎么知道ASCII编码的规则？我们大概记住常用的可以了，其他的可以查询。

大小规则：

• 数字之间比较0-9从小到大
• 字母之间比较，小写字母大于大写字母，后面的字母大于前面的字母

了解到到以上的ASCII编码标准，我们就能轻松的比较数组和字母的数组。

2、自定义排序

上面的默认排序的都是从小到大，如果我们要倒序那该怎么办？sort（）函数是可以高阶函数，可以接受一个函数作为参数进行自定义排序。

例如：

var arr3 = [11,8,32,22];
var result = arr3.sort(function(x,y){
if(x>y){
return -1;
}
if(y>x){
return 1;
}
else{
return 0;
}
});
console.log(result);//[32, 22, 11, 8]

函数中返回的1或者-1是控制数组排序的方式。在实际操作中，返回1还是-1条件而定。

五、array函数

除了以上几个非常实用的高阶函数之外，Array对象还给我们提供了以下几个非常简单实用的高阶函数，保证你你看就会了。

1、every（）函数

every（）函数用于遍历数组内的所有元素是否符合条件。这个条件是every函数所接受的参数函数。返回时结果是一个boolean值。

例如：

var arr4 = ['null','String','number','undefined','Object'];
var result1 = arr4.every(function(x){
return x.length>5;
});

console.log(result1);//false 因为不是所有元素的长度都大于5

2.、find（）函数

find（）函数根据所接收的函数作为条件，根据这个条件，查找数组满足条件的第一个元素，如果找到了就返回这个元素，否则就返回undefined。

例如：

var arr5 = ['A','a','b','B'];
var result2 = arr5.find(function(x){
return x.indexOf('A') == 0;
});
console.log(result2);//返回'A', find（）返回的是满足条件数组的元素

3、findIndex（）函数

上面已经学习过了find（）函数，放回的是元素。那么可以猜想findIndex（）函数返回的是满足条件的索引值。

var arr5 = ['A','a','b','B'];
var result2 = arr5.findIndex(function(x){
return x.indexOf('A') == 0;
});
console.log(result2);//返回0, findIndex（）返回的是满足条件的数组的元素的索引值

4、forEach（）函数

forEach（）函数其实和map相似，都是遍历数组内的元素，分别把元素作为参数传入函数参数中。不同的是map返回的是一个新的数组，而forEach只是遍历元素输出。

例如：

var arr6 = ['d','a','b','c'];
arr6.forEach(function(x){
var result3 = x.toLocaleUpperCase();
console.log(result3);//分别输出'D','A','B','C'
})

以上都是Array对象中的高阶函数，作用于数组，使得数组的运算和转换更加方便简单清晰。学完之后我巴不得马上就使用，几行代码就能搞定复杂的元素元素。希望你也学以智用。