JavaScript中数组高阶函数的使用

一.数组高阶函数---forEach

它可以用来遍历数组中的每个元素，并对每个元素执行指定的操作。forEach函数接受一个回调函数作为参数，该回调函数在遍历数组的每个元素时被调用。该方法没有返回值.

基本语法

array.forEach(callback(currentValue, index, array), thisArg);

参数说明：

• callback：必需。表示要对每个元素执行的回调函数。
• currentValue：必需。表示当前正在处理的元素的值。
• index：可选。表示当前正在处理的元素的索引。
• array：可选。表示正在遍历的数组。
• thisArg：可选。表示在执行回调函数时要使用的this值。

演示

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

numbers.forEach(function(number) {
  console.log(number);
});

 结果

我们定义了一个数组numbers，然后使用forEach函数遍历该数组。回调函数接收一个参数number，代表数组中的每个元素，然后我们在回调函数中使用console.log打印每个元素的值。

除了打印元素，你还可以在回调函数中执行其他操作，例如修改元素的值、累加计算等等。forEach函数对数组中的每个元素依次执行回调函数，但并不返回新的数组。如果你需要对每个元素进行转换或筛选操作，并返回新的数组，可以考虑使用map或filter函数。

 二.数组高阶函数---map

map是一个用于数组的高阶函数，它可以对数组中的每个元素执行指定的操作，并返回一个新的数组，新数组的元素是操作的结果。

基本语法

array.map(callback(currentValue, index, array), thisArg);

参数说明：

• callback：必需。表示要对每个元素执行的回调函数。
• currentValue：必需。表示当前正在处理的元素的值。
• index：可选。表示当前正在处理的元素的索引。
• array：可选。表示正在遍历的数组。
• thisArg：可选。表示在执行回调函数时要使用的this值。

 演示

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

const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log(doubledNumbers);

结果

我们定义了一个数组numbers，然后使用map函数遍历该数组。回调函数接收一个参数number，代表数组中的每个元素，并将每个元素乘以2作为回调函数的返回值。最后，我们将返回的新数组赋值给doubledNumbers并打印出来。

map函数遍历数组中的每个元素，并将每个元素传递给回调函数，然后将回调函数的返回值存储在新数组中。该方法不会修改原始数组，而是返回一个新的数组，其中包含应用了回调函数的结果。

你可以根据需要在回调函数中执行各种操作，例如对元素进行转换、筛选、提取特定属性等等。

三.数组高阶函数---filter

filter是一个用于数组的高阶函数，它可以根据指定的条件筛选出数组中符合条件的元素，并返回一个新的数组。

基本语法

array.filter(callback(currentValue, index, array), thisArg);

参数说明：

• callback：必需。表示要对每个元素执行的回调函数，用于判断元素是否符合条件。
• currentValue：必需。表示当前正在处理的元素的值。
• index：可选。表示当前正在处理的元素的索引。
• array：可选。表示正在遍历的数组。
• thisArg：可选。表示在执行回调函数时要使用的this值。

 演示

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

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers);

结果

我们定义了一个数组numbers，然后使用filter函数遍历该数组。回调函数接收一个参数number，代表数组中的每个元素，并使用条件number % 2 === 0来判断元素是否为偶数。只有符合条件的元素才会被保留在新数组中。最后，我们将返回的新数组赋值给evenNumbers并打印出来。

filter函数遍历数组中的每个元素，并将每个元素传递给回调函数，根据回调函数的返回值来决定是否保留该元素。返回的新数组包含满足条件的元素，而不包含不满足条件的元素。

四.数组高阶函数---reduce

reduce() 方法是 JavaScript 数组的一个高阶函数，用于对数组中的每个元素执行指定的归并操作，并最终返回一个累积的结果值。

基本语法

array.reduce(callback[, initialValue])

 

• callback 是一个用来处理数组元素的函数，它可以接受四个参数：累积器、当前元素、当前索引和原数组。这个回调函数必须返回一个值，这个值将作为下一次回调的累积器的值。
• initialValue 是一个可选参数，表示初始的累积值。如果不提供 initialValue，则 reduce() 方法会从数组的第一个元素开始执行回调函数，并把第一个元素作为初始的累积值。如果提供了 initialValue，则 reduce() 方法从数组的第一个元素开始执行回调函数，但初始的累积值将是 initialValue。

参数说明

1. 累积器（accumulator）：它是归并过程中累积的结果。
2. 当前元素（current element）：正在处理的当前数组元素。
3. 当前索引（current index）：当前元素在数组中的索引（可选）。
4. 原数组（array）：调用 reduce() 方法的数组本身（可选）。

 演示

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

const sum = numbers.reduce(function(accumulator, current) {
    return accumulator + current;
}, 0); // 初始累积值为 0

console.log(sum); // 输出 15

 五.数组内置函数---some

some()方法是 JavaScript 数组的一个内置方法，用于检查数组中是否至少有一个元素满足指定条件。some() 方法接受一个回调函数作为参数，该回调函数用来定义条件，并在数组的每个元素上执行。如果在数组中找到至少一个元素使得回调函数返回 true，则 some() 方法返回 true，否则返回 false。

基本语法

array.some(callback(element[, index[, array]])[, thisArg])

参数说明

• callback 是一个用来测试每个数组元素的函数，它可以接受三个参数：
  • element：当前正在测试的数组元素。
  • index（可选）：当前元素在数组中的索引。
  • array（可选）：调用 some() 方法的数组本身。
• thisArg（可选）：可选参数，用于设置回调函数中的 this 值。

演示 

const numbers = [1, 3, 5, 7, 8, 9];

const hasEven = numbers.some(function (element) {
  return element % 2 === 0;
});

console.log(hasEven); // 输出 true，因为数组中包含偶数 8

在这个示例中，some() 方法遍历数组中的每个元素，并使用回调函数来检查是否有元素满足 element % 2 === 0 这个条件。由于数组中有一个偶数（8），所以 some() 返回 true。