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);

可以这样理解:

reduce高阶函数

结合例子,例如:

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

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?