JS中Array.map, filter, reduce方法详解_javascript数组-js教程-PHP中文网

JS中Array.map, filter, reduce方法详解_javascript数组

夢幻星辰

发布： 2025-11-04 16:28:02

原创

587人浏览过

map用于转换数组元素并返回新数组；2. filter筛选符合条件的元素组成新数组；3. reduce将数组累积计算为单一值；三者均不改变原数组，适用于函数式编程场景。

js中array.map, filter, reduce方法详解_javascript数组

在JavaScript中，Array.map、filter 和 reduce 是数组的三个核心高阶函数方法。它们都用于处理数组数据，但用途和返回结果各不相同。掌握这三个方法，能让你写出更简洁、可读性更强的代码。

Array.map：映射新数组

map() 方法会创建一个新数组，新数组中的每个元素是原数组中对应元素调用提供的函数后的返回值。它不会修改原数组，而是返回一个经过“转换”的新数组。

常见使用场景包括：格式化数据、提取属性、类型转换等。

const numbers = [1, 2, 3, 4]; const doubled = numbers.map(x => x * 2); // 结果: [2, 4, 6, 8]

const users = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ]; const names = users.map(user => user.name); // 结果: ['Alice', 'Bob']

Array.filter：筛选符合条件的元素

filter() 方法返回一个新数组，包含所有满足测试条件的元素。原数组不变，常用于从数组中提取符合特定规则的数据。

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

适合用于搜索、过滤无效数据或按条件分类。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

const numbers = [1, 2, 3, 4, 5, 6]; const evens = numbers.filter(x => x % 2 === 0); // 结果: [2, 4, 6]

const products = [ { name: 'Laptop', price: 1200, inStock: true }, { name: 'Mouse', price: 25, inStock: false }, { name: 'Keyboard', price: 80, inStock: true } ]; const available = products.filter(p => p.inStock); // 结果: 返回 inStock 为 true 的商品

Array.reduce：累积计算，归一结果

reduce() 方法将数组“缩减”为一个单一值。它对数组的每个元素执行一个 reducer 函数（升序），并将结果累计。这个方法功能最强大，也最容易让人困惑。

它可以用来求和、计数、扁平化数组、分组等复杂操作。

语法：array.reduce((accumulator, current) => { ... }, initialValue)

const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((acc, num) => acc + num, 0); // 结果: 10

// 按条件分组示例 const people = [ { name: 'Alice', age: 21 }, { name: 'Bob', age: 21 }, { name: 'Charlie', age: 25 } ]; const grouped = people.reduce((groups, person) => { const age = person.age; if (!groups[age]) groups[age] = []; groups[age].push(person); return groups; }, {}); // 结果: {21: [...], 25: [...] }

基本上就这些。map 用于转换，filter 用于筛选，reduce 用于聚合。理解它们的核心逻辑后，日常开发中几乎可以替代大部分 for 循环，让代码更清晰、更函数式。不复杂但容易忽略的是：它们都不改变原数组，记得保存返回值。

以上就是JS中Array.map, filter, reduce方法详解_javascript数组的详细内容，更多请关注php中文网其它相关文章！