美文网首页
JavaScript高阶函数

JavaScript高阶函数

作者: 无迹落花 | 来源:发表于2018-08-22 15:50 被阅读58次

    概念



    所谓的高阶函数就是:

    • 函数可以作为参数

    • 函数可以作为返回值


    filter

    
    //  一切皆对象,函数可以是一个变量
    
    var tripe= function(x){
        return x*3
    } 
    
    tripe(3)    //  9
    
    

    上面的代码很简单,上面代码只是为了说明: 一切皆对象,函数也是对象,函数可以是一个变量。

    正是这样的特殊性,函数可以作为另一个函数的参数进行传递,这种方式就是高阶函数。 ----函数中包含着另一个函数。

    例子:

    找出一个数组中比3大的数,并拿出来。



    传统方法,for 循环再 push

    
    
    function bigger(arr){
        let ret=[]
        for(let i=0;i<arr.length;i++){
            if(arr[i]>3){
                ret.push(arr[i])
            }
        }
    
        return ret
    }
    
    
    
    console.log(bigger([1,2,3,4,5]))   // [4,5]
    

    使用 filter的方法

    var arr=[1,2,3,4,5]
    
    var b=arr.filter(x=>{
        return x>3
    })
    
    console.log(b)   // [4,5]
    
    

    可以看到 filter 接收一个函数作为参数,函数会遍历数组每一个 item,当 return 为 true 时,会返回当前的item。

    这只是一个简单的逻辑,我们说的函数式编程,目的是为了让函数尽量功能简单、逻辑清晰,没有耦合的组织可以让函数复用和代码高效上更有利。所以我们改写一下上面的内容。

    
    
    var isBig=function (x){
        return x>3
    }
    
    
    var arr=[1,2,3,4,5]
    var b=arr.filter(isBig)
    
    console.log(b)    //  [4,5]
    

    这样子,就完成了解耦,我们就是把函数当作一个变量、参数传给了另一个函数,这就是最基本的思想。


    map

    map 是映射的意思,其实和filter很相似,只不过map是映射和变换原数组。

    例子:

    一个数组中包含了很多对象,我想要获取这些对象的名字

    
    
    var info=[
        {name:"Andy",age:18},
        {name:"Lina",age:16},
        {name:"Lion",age:99},
        {name:"Spe",age:999}
    ]
    
    
    //  我想获取这个数组里面队友对象对应的名字,name属性
    

    使用map的代码就是下面的这样

    var info=[
        {name:"Andy",age:18},
        {name:"Lina",age:16},
        {name:"Lion",age:99},
        {name:"Spe",age:999}
    ]
    
    
    //  我想获取这个数字里面队友对象对应的名字,name属性
    
    
    
    var names=info.map((item,key)=>{
        return item.name
    })
    
    
    console.log(names)   //  ["Andy", "Lina", "Lion", "Spe"]
    
    

    解耦一下,就是下面这样

    var info=[
        {name:"Andy",age:18},
        {name:"Lina",age:16},
        {name:"Lion",age:99},
        {name:"Spe",age:999}
    ]
    
    
    //  我想获取这个数字里面队友对象对应的名字,name属性
    
    
    function infoMap(item,key){
        return item.name
    }
    
    
    var names=info.map(infoMap)
    
    
    console.log(names)   //  ["Andy", "Lina", "Lion", "Spe"]
    

    filter遍历根据truefalse来决定是否返回原对象。

    map就是纯粹的变换(transform)


    reduce

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

    reduce() 可以作为一个高阶函数,用于函数的 compose。

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

    语法

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

    reduce接收两个参数,第一个是callback,第二个参数是初始值。

    
    
    var arr = [1,2,3,4,5];
    var sum = arr.reduce((sum,next)=>{
        return sum + next;
    },0)
    
    
    console.log(sum)   // 15
    
    

    最简单的用处,用来计算数组元素之和。

    另一个例子

    我要把下面样子的数组变成对象

     var arr=[{a:"aa"},{b:"bb"},{c:"cc"},{d:"dd"},{e:"ee"}]
    

    变成一个对象

    {a:"aa",b:"bb",c:"cc",d:"dd",e:''ee"}
    



    语法

    let output=arr.reduce((pre,current)=>{
      return Object.assign(pre,current)
    },{})
    

    后台输出output

      {a: "aa", b: "bb", c: "cc", d: "dd", e: "ee"}
    

    简单而言就是

    let output=arr.reduce((pre,current)=>Object.assign(pre,current),{})
    

    reduce绝不仅仅是遍历一个数组或者做一个加法这么简单。

    他可以做更复杂事情,可以对对象进行操作。

    下面是一个例子:

    var name = [
        'sam\tblender\t200\t1    ',
        'sam\tpot\t130\t5    ',
        'nacy\tconaver\t20\t3    ',
        'amy\tpot\t130\t2    ',
        'amy\tblender\t4\t2    '
    ]
    
    

    现在需要统计这个数组中,sam\nacy\amy的个人财产和数据。 怎么办呢?

    利用上面介绍的方法组合,可以很好的做到

    思路:
    map对每个字符串进行处理和变换
    使用reduce进行统计

    var output = 
        name.map((item)=>{item.trim().split('\t')})
            .reduce((customers,line)=>{
               customers[line[0]] = customers[line[0]] || [];
               customers.push({
                   name: line[0],
                   property: line[1],
                   price:line[2],
                   quilty: line[3]
               })
            },{})
    
    

    嗯,可能有点复杂了,一行一行来看。

    map的作用: 经过map,将原来每一项的字符串,转换成了数组,现在是
    这样的形式:
    [
        [[sam],[blender],[200],[1]],
        [[sam],[pot],[130],[5]],
        ...
    ]
    
    好了,继续就到了reduce。我们给reduce穿的`init`是一个空对象,也就是
    会创建一个对象作为返回值
    第一次循环: 
      customers:{}  line: [[sam],[blender],[200],[1]]
      customers.sam = [];
      custormers.sam.push({...})
         ==> 最终 
         customers = {
            sam:[{
                name:sam,
                property:blender,
                price:200,
                quilty:1
            }]
         }
    
    第二次循环:
        custormers:{sam:[...]}  line:[[sam],[pot],[130],[5]]
        custormers.sam = [...]
        继续为sam这个对象,增加“财产"
        ...
    
    ...
    
    

    reduce 实现compose

    相关文章

      网友评论

          本文标题:JavaScript高阶函数

          本文链接:https://www.haomeiwen.com/subject/zstyiftx.html