[JavaScript知识库]高阶函数（Higher-order function）

高阶函数

什么是高阶函数

• 高阶函数(Higher-order funciton)
  • 可以把函数作为参数传递给另一个函数
  • 可以把函数作为另一个函数的返回结果
• 函数作为参数

// 模拟forEach
function forEach(arr, callback) {
    for (let i = 0; i < arr.length; i++) {
        callback(arr[i], i)
    }
}

const arr = ['张三', '里斯', '卫庄']

forEach(arr, function(item, i) {
    console.log(item, i) 
    // 张三 0
    // 里斯 1
    // 卫庄 2
})

// 模拟filter
function filter(arr, callback) {
    const result = []
    for (let i = 0; i < arr.length; i++) {
        if (callback(arr[i])) {
            result.push(arr[i])
        }
    }
    return result
}

const res = filter(arr, item => {
    if (item === '卫庄') return item
})
console.log(res) // [ '卫庄' ]

• 作为返回值

function once(fn) {
    let done = false
    return function() {
        if (!done) {
            done = true
            return fn.apply(this, arguments)
        }
    }
}

const pay = once(function(menoy) {
    console.log(menoy)
})

// 只执行一次
pay(5)
pay(5)

常用高阶函数

• forEach
• map
• filter
• every
• some
• find/findIndex
• reduce
• sort
• …

// 模拟Array.prototype.map()
const map = (array, callback) => {
    const result = []
    for (let value of array) {
        result.push(callback(value))
    }
    return result
}

const arr = [1, 3, 4, 5, 9]
const result = map(arr, v => v * v)
console.log(result) // [ 1, 9, 16, 25, 81 ]

// 模拟Array.prototype.every()
const every = (array, callback) => {
    let result = true
    for (let value of array) {
        result = callback(value)
        if (!result) break
    }
    return result
}

const arr1 = [10, 31, 3, 21]
const result1 = every(arr1, v => v > 10)
const result2 = every(arr1, v => v > 1)
console.log(result1) // false
console.log(result2) // true

// 模拟Array.prototype.some()
const some = (array, callback) => {
    let result = false
    for (let value of array) {
        result = callback(value)
        if (result) break
    }
    return result
}
const arr2 = [1, 3, 5]
const result3 = some(arr1, v => v % 2 === 0) // true
const result4 = some(arr2, v => v % 2 === 0) // false

// 模拟Array.prototype.find()
const find = (array, callback) => {
    let result
    for (let value of array) {
        if (callback(value)) {
            result = value
        }
    }
    return result
}

const arr = ['javascript', 'vue', 'react', 'typescript']
const res = find(arr, v => v === 'vue')
console.log(res)

// 模拟Array.prototype.findIndex()
const findIndex = (array, callback) => {
    let index
    for (let i in array) {
        if (callback(array[i])) {
            index = i
        }
    }
    return index
}
const res = findIndex(arr, v => v === 'vue')
console.log(res) // 1

// 模拟reduce
const reduce = (array, callback, initVal) => {
    let initValue = initVal || 0
    for (let i = 0; i < array.length; i++) {
        initValue = callback(initValue, array[i], i, this)
    }
    return initValue
}
const res = reduce([1,2,3,4], (prev, item) => prev + item)
console.log(res) // 10

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖