如何用map函数打印数组的键、值及索引？附代码修正方案

开发者阿泽

2026-8-16

解决方案

首先，你遇到的核心问题是对象不能直接调用map方法——map是数组的原型方法，而你定义的colorObj是JavaScript对象，所以原代码会报错。下面提供两种可行的实现方式，都能满足你跟踪索引、输出键值对的需求：

方法一：使用`Object.entries()`（推荐）

Object.entries()会将对象转换为[键, 值]格式的二维数组，这样就能直接用map遍历，同时获取键、值和索引：

const colorObj = {'0:0': 'Red', '0:1': 'Blue', '0:2': 'Green', '0:3': 'Orange'};

// React组件示例
function ColorList() {
  return (
    <ol>
      {Object.entries(colorObj).map(([key, val], index) => (
        <li key={key}>
          {`${index + 1}. ${val}, ${key}, ${index}`}
        </li>
      ))}
    </ol>
  );
}

代码说明：

Object.entries(colorObj)返回数组：[['0:0', 'Red'], ['0:1', 'Blue'], ['0:2', 'Green'], ['0:3', 'Orange']]
map的第一个参数是解构后的[key, val]，第二个参数index就是你需要的跟踪索引
使用模板字符串${}拼接内容，比原代码的字符串拼接更简洁易读
用<ol>直接生成有序列表，完美匹配你期望的输出结构
给每个<li>添加key属性，符合React的列表渲染规范

方法二：使用`Object.keys()`

如果需要单独处理对象的键，也可以用Object.keys()先获取所有键的数组，再通过键取值：

const colorObj = {'0:0': 'Red', '0:1': 'Blue', '0:2': 'Green', '0:3': 'Orange'};

function ColorList() {
  return (
    <ol>
      {Object.keys(colorObj).map((key, index) => {
        const val = colorObj[key];
        return (
          <li key={key}>
            {`${index + 1}. ${val}, ${key}, ${index}`}
          </li>
        );
      })}
    </ol>
  );
}