登录
首页 >  文章 >  前端

JS数组map方法使用教程

时间：2026-01-28 15:23:52 442浏览 收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JS数组map遍历方法详解》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

map()方法创建新数组，其值为原数组元素调用回调函数的返回值。例如：numbers.map(num => num * 2)返回[2,4,6,8]；users.map(user => user.name)提取姓名；items.map((item, idx) => ${idx}: ${item})结合索引生成新字符串。注意原数组不变，需有return语句，空槽位置保留。

js数组遍历map方法

JavaScript 中的数组 map() 方法用于对数组中的每个元素调用一个提供的函数，并返回一个由回调函数返回值组成的新数组。原始数组不会被修改。

基本语法

array.map(function(currentValue, index, arr), thisArg)
  • currentValue：当前处理的元素
  • index（可选）：当前元素的索引
  • arr（可选）：调用 map 的原数组
  • thisArg（可选）：执行回调函数时使用的 this 值

map() 返回一个新数组，其内容是原数组中每个元素调用回调函数后的返回值。

常见使用示例

1. 数组元素乘以 2

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

2. 提取对象数组中的某个属性

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

3. 使用索引参数

const items = ['a', 'b', 'c'];
const withIndex = items.map((item, idx) => `${idx}: ${item}`);
// withIndex: ['0: a', '1: b', '2: c']

注意事项

  • map() 不会改变原数组
  • 如果不需要返回新数组，而只是想遍历执行操作，应使用 forEach()
  • 回调函数中必须有 return 语句，否则新数组的对应项为 undefined
  • map() 无法跳过稀疏数组中的空槽，但会保留它们的位置

基本上就这些。map 是处理数组转换最常用的方法之一，适合用于数据映射和结构转换场景。

今天关于《JS数组map方法使用教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

前往漫画官网入口并下载 ➜
数组遍历
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>