Javascript 的高阶函数

1. 定义：

• 对于高阶函数，维基百科是这样定义的：

  
  高阶函数定义.png

• 通俗一点讲就是，一个函数能够将另一个函数作为参数，也可以把一个函数当作返回值返回，那么这个函数就可以称之为高阶函数。

2. 举例：

    const a = function() {
        console.log("我是a")
    }

    const b = function() {
        console.log("我是b")
    }

    function print(flag, a, b) {
        if(flag === 'first') {
            a();
        } else if(flag === 'second') {
            b();
        }
    }

    print('first', a, b); // 我是a

• 以上就是 print 函数把 a 和 b 函数当作参数传入，print 函数就可以称之为高阶函数。

3. JS 中内置的高阶函数

3.1 map

• 定义：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。(MDN上关于map函数的定义)

• 假如我们有一下数组：

    const message = [
        {
            name: 'kunkun',
            age: 21,
            hobby: `sing, jump, rap`
        },
        {
            name: 'xiaochuan',
            age: 29,
            identity: 'Emperor of Japan'
        }
    ]

我们想给数组内每个对象添加一个新属性：relationship, 如果不用 map 一般我们会采用 for 循环，但是我们用 map 函数的话代码看起来开会更简洁而且代码量也会更少，如：

    const newMessage = message.map(item => {
        item.relationship = 'brothers';
        return item;
    })

打印结果如下：

map.png

3.2 filter

• filter 顾名思义就是过滤，我们还拿上面的数组 message 举例， 我们想筛选出年龄大于21岁的人，可以用 filter 这么写：

    const newMessage = message.filter(item => {
        return item.age > 21;
    })

打印结果如下：

filter.png

3.3 find

• find 函数是返回满足条件的 第一个对象，如：

    const newMessage = message.find(item => {
        return item.age > 21;
    })

打印结果如下：

find.png

find 和 filter 的不同:

1. filter 返回的是 数组 ，而 find 返回的是 对象 ;
2. filter 返回 所有 满足条件的数据，而 find 只返回 第一个 查找到的满足条件的数据， 可能这也是它们两个一个返回数组一个返回对象的原因吧。

3.4 some

• some 函数返回一个布尔值，如果某个数组至少有一项数据通过函数检查，那么它就返回 true，如：

    function checkAge() {
        return message.some(val => {
            return val.age > 21
        })
    }

打印结果为 true，因为 message 数组里面有一项 age 大于 21。

3.5 every

• 和 some 函数一样也是返回一个布尔值，不过和 some 函数不同的地方在于，every 会检查数组每一项，如果 全部 合格才会返回 true，不然就会返回 false，如：

    function checkAge() {
        return message.every(val => {
            return val.age > 21
        })
    }

打印结果为 false，因为 message 数组里面有一项 age 等于 21。

3.6 reduce

• 定义：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

reducer 函数接收4个参数:

Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
您的 reducer 函数的返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。

举例如下：

    function addAge() {
        return message.reduce((accumulator, currentValue) => {
            return accumulator + currentValue.age
        }, 0)
    };

打印结果为：50。