如何遍历对象数组类型JSON并按id检索元素，解决访问下标返回undefined问题

核心原因排查 #

首先执行以下代码确认peopleData的真实结构，90%以上的该类问题都是结构不符合预期导致的：

console.log('完整结构：', peopleData)
console.log('是否为真数组：', Array.isArray(peopleData))
console.log('对象长度：', peopleData.length)
console.log('所有可枚举键：', Object.keys(peopleData))

常见的不符合预期的场景如下：

• 异步请求未完成就提前访问：如果是通过接口请求获取的该数据，要确认访问peopleData时，请求已经完成、数据已经完成赋值，不要在异步逻辑外同步访问未赋值的变量
• 数据未反序列化：如果拿到的是原始JSON字符串，必须用JSON.parse(原始字符串)转成JS数组才能正常访问元素，注意你提供的示例JSON存在语法错误：home属性下的city字段末尾缺少英文逗号，会导致反序列化失败
• 取值层级错误：比如接口返回的结构是{ code: 200, data: [你的数组] }，你误将外层响应对象当成了数组赋值给peopleData

遍历/查找方案 #

真数组场景 #

确认是真数组后，直接用数组的find方法即可快速按id查找目标对象：

const targetId = '需要检索的id值'
const targetObj = peopleData.find(item => item.id === targetId)
// 找到则返回对应对象，没找到返回undefined

也可以用常规遍历方法：

for (let i = 0; i < peopleData.length; i++) {
  if (peopleData[i].id === targetId) {
    // 匹配到目标对象，执行对应逻辑
    break
  }
}

类数组对象场景 #

如果确认peopleData是有数字索引、有length属性的类数组对象（比如NodeList、自定义类数组结构），先转成真数组再操作即可：

// 两种类数组转数组的方法
const realArray = Array.from(peopleData)
// 或
const realArray = [...peopleData]

// 转成数组后就可以用上述的find方法查找目标
const targetObj = realArray.find(item => item.id === targetId)

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