JavaScript 高阶函数详解

不掉发的坨坨子

于 2024-06-23 15:22:08 发布

阅读量553

点赞数 14

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_65084430/article/details/139900825

版权

引言

在JavaScript中，高阶函数（Higher-Order Functions）是一类非常重要的函数。它们可以接收函数作为参数，或者返回一个函数，从而使代码更具灵活性和可复用性。本文将详细介绍JavaScript中的高阶函数及其常见用法。

什么是高阶函数

高阶函数具备以下两个特性中的一个或两个：

接受一个或多个函数作为参数
返回一个函数

高阶函数在函数式编程中扮演着重要角色，使得代码更加简洁、易读和易维护。

常见高阶函数

Array.prototype.map

map 方法创建一个新数组，其结果是原数组中的每个元素调用一个提供的函数后的返回值。

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10]

Array.prototype.filter

filter 方法创建一个新数组，其中包含所有通过提供函数实现的测试的元素。

const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(num => num % 2 === 0); console.log(evenNumbers); // [2, 4]

Array.prototype.reduce

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

const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 15

Array.prototype.forEach

forEach 方法对数组的每个元素执行一次提供的函数。

const numbers = [1, 2, 3, 4, 5]; numbers.forEach(num => console.log(num * 2)); // 输出: 2 4 6 8 10

Array.prototype.some

some 方法测试数组中的某些元素是否通过了由提供的函数实现的测试。

const numbers = [1, 2, 3, 4, 5]; const hasEvenNumber = numbers.some(num => num % 2 === 0); console.log(hasEvenNumber); // true

Array.prototype.every

every 方法测试数组中的所有元素是否通过了由提供的函数实现的测试。

const numbers = [1, 2, 3, 4, 5]; const allEvenNumbers = numbers.every(num => num % 2 === 0); console.log(allEvenNumbers); // false

Array.prototype.find

find 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const numbers = [1, 2, 3, 4, 5]; const firstEvenNumber = numbers.find(num => num % 2 === 0); console.log(firstEvenNumber); // 2

Array.prototype.sort

sort 方法用原地算法对数组的元素进行排序，并返回数组。排序不是按数字，而是按字符串Unicode码点进行。

const numbers = [5, 3, 8, 1, 2]; numbers.sort((a, b) => a - b); console.log(numbers); // [1, 2, 3, 5, 8]

Function.prototype.bind

bind 方法创建一个新的函数，在 bind 被调用时，这个新函数的 this 被指定为 bind 的第一个参数，其余参数作为新函数的参数。

const module = { x: 42, getX: function() { return this.x; } }; const unboundGetX = module.getX; console.log(unboundGetX()); // undefined const boundGetX = unboundGetX.bind(module); console.log(boundGetX()); // 42

组合特性

高阶函数不仅仅能够接受函数作为参数或返回函数，它们还可以组合使用，从而实现更复杂的功能。

示例：函数工厂

函数工厂是一个返回新函数的高阶函数，它使得我们可以根据输入生成不同的函数。

function createMultiplier(multiplier) { return function(num) { return num * multiplier; }; } const double = createMultiplier(2); const triple = createMultiplier(3); console.log(double(5)); // 10 console.log(triple(5)); // 15