javascript 的 map 方法通过回调函数将原数组转换为新数组,不修改原数组,常用于字段提取、数值计算、格式化和对象重构,需避免副作用、嵌套 map 和无意义使用。

JavaScript 中的 map 方法是转换数组元素最简洁、函数式的方式——它不修改原数组,而是返回一个新数组,每个元素都由你提供的回调函数处理过。
理解 map 的基本用法
map 接收一个回调函数,该函数会为原数组的每个元素执行一次,并将返回值组成新数组。回调函数默认接收三个参数:当前元素、索引、原数组,但绝大多数场景只需第一个参数。
- 语法:
arr.map((item, index, array) => { /* 返回新值 */ }) - 必须有返回值,否则新数组对应位置是
undefined - 原数组保持不变,适合纯函数式编程和不可变数据操作
常见高效转换场景
实际开发中,map 最常用于结构转换、类型处理和字段提取:
-
提取对象字段:如从用户列表中提取所有
id或name:users.map(u => u.name) -
数值批量计算:如给价格数组统一加税:
prices.map(price => price * 1.1) -
格式化字符串:如将日期时间戳转为可读格式:
timestamps.map(ts => new Date(ts).toLocaleString()) -
创建新对象结构:保留部分字段并添加计算属性:
items.map(item => ({ id: item.id, title: item.title.toUpperCase(), isLong: item.title.length > 20 }))
避免常见低效写法
高效使用 map 的关键是专注“转换”,别混入副作用或复杂逻辑:
- 不要在
map回调里调用push、修改外部变量或发起请求——那是forEach的职责 - 避免嵌套
map处理二维数组;若需扁平化,优先用flatMap(ES2019):matrix.flatMap(row => row) - 不需要新数组时别用
map,比如只遍历打印,用forEach更语义清晰 - 若条件跳过某些元素,
map仍会保留空位(返回undefined),此时应先filter再map
配合其他方法提升表达力
map 经常与 filter、reduce 等组合使用,链式调用让逻辑更可读:
- 筛选后转换:
products.filter(p => p.inStock).map(p => ({ name: p.name, price: p.price })) - 转换后聚合:
orders.map(o => o.total).reduce((sum, t) => sum + t, 0) - 多级转换(注意性能):
data.map(x => x.items).flat().map(i => i.id)可简化为data.flatMap(x => x.items).map(i => i.id)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











