码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript高阶函数map/reduce、filter和sort

时间:2017-10-10 16:31:57      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:关心   app   return   string   log   span   冒泡排序   情况下   过程   

map()

举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上。

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

  function pow(x) {
        return x*x;
    }

    var arr = [1,2,3,4,5,6,7,8,9];
    arr.map(pow);//[1,4,9,16,25,36,49,64,81]

map()传入的参数是pow,即函数对象本身。

map()作为高阶函数,事实上它把运算规则抽象了,因为,我们不但可以计算简单的f(x)=x2,还可以计算任意复杂的函数,比如Array的所有数字转为字符串:

  var arr = [1,2,3,4,5,6,7,8,9];
    arr.map(String);//[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘]
    //只需要一行代码

reduce()

再看reduce的用法,Array的reduce()把一个函数作用在这个Array的[x1,x2,x3……]上。这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做积累计算,其效果就是

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

比如说对一个Array求和,就可以用reduce实现:

  var arr = [1,3,5,7,9];
    arr.reduce(function(x,y){
        return x+y;
    });//25

要把[1,3,5,7,9]变换成整数13579,reduce()也能派上用场:

  var arr = [1,3,5,7,9];
    arr.reduce(function(x,y) {
        return x*10+y;
    });//13579

 

filter()

filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。

和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。

例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

  var arr = [1,2,4,5,6,9,10,15];
    var r = arr.filter(function(x) {
        return x % 2 !== 0;
    });
    r;//[1,5,9,15]

把一个Array中的空字符串删掉,可以这么写:

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

filter()这个高阶函数,关键在于正确实现一个“筛选”函数。

 

回调函数

filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

  var arr = [‘A‘,‘B‘,‘C‘];
    var r=arr.filter(function(element,index,self) {
        console.log(element);//依次打印‘A‘,‘B‘,‘C‘
        console.log(index);//依次打印0,1,2
        console.log(self);//self就是变量arr
        return true;
    })

 

 

sort

排序算法:

排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序。排序的核心是比较两个元素的大小。如果是数字,我们可以直接比较。但如果是字符串或者两个对象呢?直接比较数字上的大小是没有意义的,因此,比较的过程必须通过函数抽象出来。通常规定,对于两个元素x和y,如果认为x<y,则返回-1,如果x==y,则返回0,如果认为x>y,则返回1,这样,排序算法就不用关心具体的比较过程,而是根据比较的结果直接排序。

Array的sort()方法就是用于排序的。但是排序结果可能让你大吃一惊。

这是因为Array的sort()方法默认把所有元素先转换为String再排序,结果‘10’排在了‘2’的前面,因为字符‘1’比字符‘2’的ASCII码小。

如果不知道sort()方法的默认排序规则,直接对数字排序,大吃一惊。

sort()也是一个高阶函数。可以接收一个比较函数实现自定义排序。

  var arr=[10,20,1,2];
    arr.sort(function(x,y){
        if(x<y) {
            return -1;
        }
        if(x>y) {
            return 1;
        }
        return 0;
    });//[1,2,10,20]

默认情况下,对字符串排序,是按照ASCII的大小比较的,现在,我们提出排序应该忽略大小写,按照字母序排序。要实现这个算法,不必对现有代码大加改动,只要我们能定义出忽略大小写的比较算法就可以:

  var arr = [‘Google‘,‘apple‘,‘Microsoft‘];
    arr.sort(function (s1,s2){
        x1 = s1.toUpperCase();
        x2 = s2.toUpperCase();
        if(x1<x2) {
            return -1;
        }
        if(x1>x2) {
            return 1;
        }
        return 0;
    });//[‘apple‘,‘Google‘,‘Microsoft‘]

忽略大小写来比较两个字符串,实际上就是先把字符串都变成大写(或者小写),再做比较。

高阶函数的抽象能力是非常强大的,而且,核心代码可以保持得非常简洁。

sort()方法会直接对Array进行修改,它返回的结果仍是当前Array:

  var a1 = [‘B‘,‘A‘,‘C‘];
    var a2 = a1.sort();
    a1;//[‘A‘,‘B‘,‘C‘]
    a2;//[‘A‘,‘B‘,‘C‘]
    a1 === a2;//true,a1和a2是同一对象。

 

JavaScript高阶函数map/reduce、filter和sort

标签:关心   app   return   string   log   span   冒泡排序   情况下   过程   

原文地址:http://www.cnblogs.com/yuanxinru321/p/7645638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!