React中for-in循环仅返回数组索引而非对象的问题排查

这是因为for...in循环的设计初衷是用来遍历对象的可枚举属性，而数组在JavaScript里本质上是一种特殊的对象——它的索引（0、1这些数字）就是对象的键名。所以当你用for...in遍历数组时，拿到的是数组的索引值，而不是数组里的元素对象。

正确遍历数组元素的几种方法： #

• 使用for...of循环：这是ES6新增的专门遍历可迭代对象（比如数组、字符串等）的语法，能直接获取数组元素：

  for (let item of this.state.items.results) {
    console.log(item); // 这里会打印每个完整的对象
  }
  

• 使用数组的forEach方法：更符合JavaScript函数式编程风格，也是React项目中常用的遍历方式：

  this.state.items.results.forEach(item => {
    console.log(item);
  });
  

• 传统的for循环：通过索引手动获取元素，兼容性最好（不过现在大部分场景下前面两种方法足够用了）：

  for (let i = 0; i < this.state.items.results.length; i++) {
    console.log(this.state.items.results[i]);
  }
  

额外提醒一句：尽量避免用for...in遍历数组，除了会拿到索引外，它还可能遍历到数组原型链上添加的自定义属性，导致意外的结果。

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