Vue中对带自定义键的嵌套JSON对象按ID筛选获取指定属性值

报错原因 #

filter是JavaScript数组的专属方法，你的原始数据是普通对象，直接调用会触发filter is not a function报错，需要先把对象的嵌套子项转换为数组再做筛选。

方案1：ES6+简洁写法（推荐） #

通过Object.values()提取对象所有嵌套子项为数组，再用find方法匹配目标ID（ID唯一的场景下find比filter性能更高，匹配到第一个结果就终止遍历）

// 你的原始嵌套对象
const vehicleData = {
  "51": {
    "wheels": 10,
    "id": 1,
    "name": "truck"
  },
  "55": {
    "wheels": 4,
    "id": 33,
    "name": "Car"
  },
  "88": {
    "wheels": 2,
    "id": 90,
    "name": "Bike"
  }
}

// 封装查询方法
function getWheelsByVehicleId(targetId) {
  const matchedVehicle = Object.values(vehicleData).find(item => item.id === targetId)
  return matchedVehicle ? matchedVehicle.wheels : null // 未匹配到返回null，可自行调整默认值
}

// 调用示例：查询ID=33的wheels值
console.log(getWheelsByVehicleId(33)) // 输出 4

方案2：旧环境兼容写法 #

如果需要兼容不支持ES6的运行环境，可以用for...in遍历对象键实现：

function getWheelsByVehicleId(targetId) {
  for (const key in vehicleData) {
    // 跳过原型链上的属性，避免误判
    if (vehicleData.hasOwnProperty(key) && vehicleData[key].id === targetId) {
      return vehicleData[key].wheels
    }
  }
  return null
}

多匹配场景调整 #

如果存在多个条目ID相同的场景，把find替换为filter，再提取所有匹配项的wheels属性即可：

function getAllWheelsByVehicleId(targetId) {
  return Object.values(vehicleData)
    .filter(item => item.id === targetId)
    .map(item => item.wheels)
}

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