掌握JavaScript中的数组方法：map、filter和reduce-js教程-PHP中文网

掌握JavaScript中的数组方法：map、filter和reduce

花韻仙語

发布： 2024-12-18 13:39:16

原创

1140人浏览过

掌握javascript中的数组方法：map、filter和reduce

JavaScript数组核心方法：map、filter和reduce详解

JavaScript提供了一套强大的数组方法，其中map、filter和reduce这三个高阶函数是每个开发者都必须掌握的利器，它们能显著简化数组操作。

1. map方法

map方法通过回调函数转换数组的每个元素，并返回一个新的数组，其长度与原数组相同。

语法

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

登录后复制

示例：元素转换

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

登录后复制

用例

数据转换 (例如：单位转换、数据格式化)

2. filter方法

filter方法创建一个新数组，其中只包含通过回调函数测试的元素。

语法

array.filter(callback(element[, index[, array]])[, thisArg]);

登录后复制

示例：元素过滤

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

登录后复制

用例

根据特定条件筛选数组元素 (例如：过滤空值、查找符合条件的用户)

3. reduce方法

reduce方法将一个函数应用于累加器和数组的每个元素（从左到右），最终将其归约为单个值。

立即学习“Java免费学习笔记（深入）”；

语法

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]);

登录后复制

示例：数组元素求和

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

登录后复制

用例

计算统计值 (例如：总和、平均值)
展平嵌套数组

4. map、filter和reduce的组合应用

这三个方法可以灵活组合，实现更复杂的数据处理。

示例：偶数平方和

const numbers = [1, 2, 3, 4, 5];
const total = numbers
  .filter(number => number % 2 === 0) // 筛选偶数
  .map(number => number * number)     // 计算平方
  .reduce((sum, num) => sum + num, 0); // 求和
console.log(total); // 输出: 20

登录后复制

5. 三种方法的主要区别

方法	目的	返回值
map	转换每个元素	与原数组长度相同的新的数组
filter	过滤元素	长度小于等于原数组的新的数组
reduce	将数组归约为单值	单个累加结果