如何为map函数返回的每个div区块添加连续递增编号

用JavaScript的map()函数生成每个div时，添加从1开始的连续编号，数组新增元素后编号自动更新为连续序列（比如5个元素时是1-5，新增后变成1-6）。之前尝试用++count实现，但无效，会导致所有编号重复更新。

原始代码 #

let displaydata = todoArry.map(item => {
    return (`
    <div class="todo">
        <p>
        ${item.todo}
        </p>
        <i class="fa-solid fa-trash" onClick=Ui.removeFunc(${item.id})></i>
    </div>
    `)
})
list.innerHTML = (displaydata).join(" ")

错误尝试的代码 #

let displaydata = todoArry.map(item => {
    return (`
    <div class="todo">
        <p>${++count}</>
        <p>
        ${item.todo}
        </p>
        <i class="fa-solid fa-trash" onClick=Ui.removeFunc(${item.id})></i>
    </div>
    `)
})
list.innerHTML = (displaydata).join(" ")

解决方法 #

直接利用map()函数的第二个参数索引值（从0开始），给索引加1就能得到从1开始的连续编号，不需要额外的外部计数器变量。这样每次数组变化后重新执行map()时，都会基于当前数组的顺序生成正确的连续编号，不会出现累加重复的问题。

修改后的代码：

let displaydata = todoArry.map((item, index) => {
    return (`
    <div class="todo">
        <p>${index + 1}</p>
        <p>
        ${item.todo}
        </p>
        <i class="fa-solid fa-trash" onClick=Ui.removeFunc(${item.id})></i>
    </div>
    `)
})
list.innerHTML = displaydata.join(" ")

为什么之前的++count方法不行？ #

因为count是外部变量，每次执行map()时如果没有重置count的值，它会一直累加；就算你每次渲染前重置count为0，也不如直接用map的索引参数可靠——索引参数是map遍历数组时自动提供的，天然和当前数组的元素顺序、数量对应，完全不需要手动维护计数器。

内容的提问来源于stack exchange，提问作者mrJsK