JavaScript中用map动态生成带索引的新数组，关键在于直接使用回调函数的第二个参数index，无需额外计数器；index始终表示元素在当前数组中的位置，可配合+1、padStart等实现编号格式化。

JavaScript 中用 map 动态生成带索引的新数组，关键在于利用 map 方法的第二个参数 —— 当前元素的索引（index）。

map 的第二个参数就是索引

map 回调函数默认接收三个参数：item（当前元素）、index（当前索引）、array（原数组）。你不需要额外维护计数器，直接使用 index 即可。

例如，把一个字符串数组转成带序号的对象数组：

const fruits = ['苹果', '香蕉', '橙子'];
const numbered = fruits.map((fruit, index) => ({
  id: index + 1,
  name: fruit,
  order: index
}));

// 结果：
// [
//   { id: 1, name: '苹果', order: 0 },
//   { id: 2, name: '香蕉', order: 1 },
//   { id: 3, name: '橙子', order: 2 }
// ]

常见用途：生成带序号的列表项

在 React、Vue 等框架中渲染列表时，常需为每项添加唯一 key 或显示序号。用 map + index 最简洁：

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

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 显示“第1项”“第2项”等提示文本
• 生成 key（仅当数组顺序稳定且无增删时推荐）
• 构造带编号的选项对象，如下拉菜单数据

注意索引不是“自增ID”，而是位置标识

index 始终对应元素在原数组中的位置，不是全局唯一 ID。如果后续对原数组做了 filter、sort 等操作，索引会随之变化。

例如：

const nums = [10, 20, 30, 40];
const evens = nums.filter(n => n % 2 === 0); // [10, 20, 30, 40] → 全是偶数
const withIndex = evens.map((n, i) => `${i}. ${n}`); // ["0. 10", "1. 20", "2. 30", "3. 40"]

即使原数组有跳变（比如过滤后只剩两个元素），索引仍从 0 开始连续编号。

进阶：结合解构和默认值灵活处理

你可以解构传入的元素，并安全使用索引，甚至加偏移或格式化：

• 从 1 开始编号：index + 1
• 补零显示：(index + 1).toString().padStart(2, '0')
• 与元素属性组合：{ ...item, seq: index + 1 }

示例：

const users = [{name: '张三'}, {name: '李四'}];
const labeled = users.map((user, i) => ({
  ...user,
  seq: (i + 1).toString().padStart(2, '0'), // "01", "02"
  key: `user-${i}`
}));