JS中的常见高阶函数的简单介绍及使用

在JavaScript中，高阶函数是函数式编程的核心概念之一。它们是那些可以接受一个或多个函数作为参数，或者返回一个函数作为结果的函数。高阶函数允许我们编写更加抽象和灵活的代码，使我们能够以更通用的方式处理数据和行为。下面详细介绍一些常见的高阶函数及其使用方法：

1. forEach

forEach 方法用于遍历数组中的每个元素，并对每个元素执行一次提供的函数。这个方法不会返回任何值（返回 undefined），并且它直接作用于原数组，不会创建新数组。

forEach 方法接受一个回调函数作为参数，该回调函数可以接受最多三个参数：

1. 当前元素的值 (element)
2. 当前元素的索引 (index) - 可选
3. 正在遍历的数组 (array) - 可选

用法示例:

const array = [1, 2, 3];

array.forEach(function(element, index, array) {
    console.log(`Index: ${index}, Value: ${element}`);
});

注意事项

• forEach 方法对数组中的每个元素执行一次提供的函数，但不会返回任何值（总是返回 undefined）。
• forEach 无法提前终止遍历，即使回调函数返回 false，遍历也会继续进行。
  如果数组为空，forEach 方法不会执行回调函数。

2. map

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

map 方法接受一个回调函数作为参数，该回调函数可以接受最多三个参数：

• element（当前元素）：数组中正在处理的当前元素。
• index（可选）：当前元素的索引。
• array（可选）：调用 map 的数组本身。

用法示例:

const array = [1, 2, 3];

const doubled = array.map(function(element) {
    return element * 2;
});

console.log(doubled); // [2, 4, 6]

注意事项

• map 方法总是返回一个新数组，其长度与原数组相同，除非回调函数返回 undefined。
• 如果回调函数不返回任何值（或者返回 undefined），新数组中对应位置的元素将是 undefined。
• map适用于需要对数组中的每个元素执行操作并收集结果的场景。

3. filter

filter方法创建一个新数组，包含通过所提供函数实现的测试的所有元素。过滤逻辑是根据回调函数返回的布尔类型的值来处理的， 返回false代表丢弃该元素。

filter 方法接受一个回调函数作为参数，该回调函数可以接受最多三个参数：

• element（当前元素）：数组中正在处理的当前元素。
• index（可选）：当前元素的索引。
• array（可选）：调用 filter 的数组本身。

用法示例:

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter(function(element) {
    return element % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

4. reduce

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

reduce 方法接受两个参数：

1. 回调函数

回调函数本身接受四个参数，但最常用的是两个参数：累加器（accumulator）和当前值（currentValue）。

• accumulator（累加器）：累计处理的结果，初始值由 reduce 的第二个参数（initialValue）决定，之后由上一次回调的返回值决定。
• currentValue（当前值）：数组中正在处理的元素。
• currentIndex（可选）：数组中正在处理的当前元素的索引。
• array（可选）：调用 reduce 的数组本身。

2. 初始值（可选）

如果不提供初始值，reduce 将从数组的第一个元素开始执行回调函数，并将第一个元素作为初始的累加器值。

用法示例:

const array = [1, 2, 3, 4];

const sum = array.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);

console.log(sum); // 10

5. sort

sort 方法用作数组排序，它接受一个比较函数来决定排序顺序。比较函数接受两个参数（通常命名为 a 和 b），并根据返回值决定排序顺序：

• 如果返回值 < 0，则 a 会被排在 b 前面。
• 如果返回值 > 0，则 a 会被排在 b 后面。
• 如果返回值 == 0，则 a 和 b 的顺序不变。

用法示例:

const array = [3, 1, 4, 1, 5];

array.sort(function(a, b) {
    return a - b; // 升序排序
});

console.log(array); // [1, 1, 3, 4, 5]

注意事项

• sort 方法会直接修改原数组。
• 如果数组元素是字符串，不提供比较函数时，sort 方法会按照字符的Unicode码点进行排序
• 对于数字排序，一定要提供比较函数，否则 sort 方法会将元素转换为字符串并按字符串顺序排序。

6. some 和 every

some 方法测试数组中是否至少有一个元素满足提供的测试函数。
every 方法测试数组中的所有元素是否都满足提供的测试函数。

some/every 方法接受一个回调函数作为参数，该回调函数对数组中的每个元素执行一次，并接收最多三个参数：

• element：当前正在处理的数组元素。
• index（可选）：当前元素的索引。
• array（可选）：正在调用 some/every 的数组。

用法示例:

const array = [1, 2, 3, 4, 5];

// 检查数组中是否有元素大于 2
const hasGreaterThanTwo = array.some(function(element) {
    return element > 2;
});

// 检查数组中是否所有元素都大于 0
const allGreaterThanZero = array.every(function(element) {
    return element > 0;
});

console.log(hasGreaterThanTwo); // true
console.log(allGreaterThanZero); // true

注意事项

• some 方法在找到第一个满足测试条件的元素后就会停止遍历数组。
• 如果数组为空，some 方法将返回 false。
• some 方法不会改变原数组。

7. find 和 findIndex

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

find/findIndex 方法接受一个回调函数作为参数，该回调函数对数组中的每个元素执行一次，并接收最多三个参数：

• element：当前正在处理的数组元素。
• index（可选）：当前元素的索引。
• array（可选）：正在调用find/findIndex的数组。

用法示例:

const array = [1, 2, 3, 4, 5];

// 找到第一个大于 3 的元素
const found = array.find(function(element) {
    return element > 3;
});

// 找到第一个大于 3 的元素的索引
const foundIndex = array.findIndex(function(element) {
    return element > 3;
});

console.log(found); // 4
console.log(foundIndex); // 3

注意事项

• find/findIndex方法遍历数组直到找到第一个满足测试函数条件的元素，找到后立即返回该元素，不会继续遍历剩余的数组元素。
• 如果数组为空： find 返回 undefined，findIndex 返回 -1
• find/findIndex方法不会改变原数组。