如何遍历JavaScript对象与数组？使用for...in遍历仅返回索引如何解决

问题原因 #

你获取到的messages是数组类型，JavaScript中for...in语句的设计目的是遍历对象的可枚举属性，当用它遍历数组时，拿到的就是数组的索引下标（也就是你输出的0、1），而非数组内的元素值。

解决方案 #

方案1：继续使用for...in，通过下标取元素 #

如果要获取对应位置的元素，直接用索引访问数组即可，拿到元素后就可以修改属性值，示例代码：

this.restProviderService.getMessages(this.gameService.getStepId(), this.gameService.teamId).subscribe(messages => {
  console.log(messages);
  for (var m in messages) {
    // 拿到当前遍历的消息对象
    const msgItem = messages[m];
    // 示例修改逻辑：将时间戳转为可读日期格式
    msgItem.createdAt = new Date(Number(msgItem.createdAt) * 1000).toLocaleString();
    console.log(msgItem);
  }
});

方案2：更推荐的数组遍历方式for...of #

遍历数组优先使用for...of语句，可以直接拿到数组的元素值，无需手动通过索引访问：

this.restProviderService.getMessages(this.gameService.getStepId(), this.gameService.teamId).subscribe(messages => {
  console.log(messages);
  for (const msgItem of messages) {
    // 直接操作元素对象即可
    console.log(msgItem);
    // 示例修改用户名显示
    msgItem.userName = `玩家：${msgItem.userName}`;
  }
});

方案3：使用数组内置forEach方法 #

也可以用数组自带的forEach方法遍历，同时可以直接拿到当前索引：

this.restProviderService.getMessages(this.gameService.getStepId(), this.gameService.teamId).subscribe(messages => {
  messages.forEach((msgItem, index) => {
    console.log(`第${index}条消息：`, msgItem);
    // 在这里写修改逻辑即可
  })
});

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