JavaScript中为循环输出项添加序号有哪些实用方法

在JavaScript的实际开发过程中，为循环输出的每一项添加序号是高频需求，无论是渲染列表、处理数据还是做日志记录，都需要用到相关技巧。不同的循环方式对应的序号添加方法存在差异，掌握多种实现方案能应对更多开发场景。

基础for循环添加序号

最传统的for循环本身就自带索引变量，我们可以直接把这个索引作为序号使用，注意序号通常从1开始展示，而索引默认从0开始，需要做加1处理。

// 定义待循环的数组
const fruitList = ['苹果', '香蕉', '橙子', '葡萄'];
// 基础for循环遍历
for (let i = 0; i < fruitList.length; i++) {
    // i是索引，从0开始，序号需要加1
    const serialNumber = i + 1;
    console.log(`序号：${serialNumber}，水果名称：${fruitList[i]}`);
}

forEach循环添加序号

数组的forEach方法内置了索引参数，第二个参数就是当前项的索引，我们可以直接利用这个参数生成序号，不需要额外声明计数器变量。

const studentList = ['张三', '李四', '王五', '赵六'];
// forEach第二个参数index就是当前项的索引
studentList.forEach((item, index) => {
    const serialNumber = index + 1;
    console.log(`序号：${serialNumber}，学生姓名：${item}`);
});

map循环添加序号

如果需要循环处理数组并返回新的带序号的数组，map方法是更合适的选择，它同样支持索引参数，我们可以在返回的新对象中携带序号信息。

const bookList = ['JavaScript高级程序设计', '你不知道的JavaScript', 'ES6标准入门'];
// map遍历并给每一项添加序号属性
const newBookList = bookList.map((item, index) => {
    return {
        serialNumber: index + 1,
        bookName: item
    };
});
console.log(newBookList);

for...of循环添加序号

for...of循环本身不会直接返回索引，我们可以通过Array.prototype.indexOf方法获取当前项的索引，不过这种方式在数组有重复项时会出现问题，更推荐配合entries方法使用。

const cityList = ['北京', '上海', '广州', '深圳'];
// 使用entries方法获取索引和值的键值对
for (const [index, item] of cityList.entries()) {
    const serialNumber = index + 1;
    console.log(`序号：${serialNumber}，城市名称：${item}`);
}

不同场景的选择建议

可以根据实际需求选择合适的序号添加方式：

• 如果只需要简单遍历输出，不需要返回值，优先选择forEach，代码更简洁
• 如果需要基于原数组生成新的带序号的数据结构，优先选择map
• 如果需要兼容旧环境或者做更复杂的循环控制，使用基础for循环更稳妥
• 如果使用for...of遍历，配合entries方法获取索引是最可靠的方案

注意事项

需要注意索引和序号的区别，索引默认从0开始，而用户看到的序号通常从1开始，所以大部分场景下需要给索引加1。如果数组中存在重复元素，不要使用indexOf获取索引，因为该方法会返回第一个匹配项的索引，导致序号错误。另外如果遍历的是类数组对象，需要先转换为数组再使用上述方法，比如通过Array.from转换之后再添加序号。

JavaScript循环序号数组遍历for_loop修改时间：2026-06-13 09:51:23