如何按属性过滤数组？JavaScript调用filter报错不是函数如何解决

问题根因 #

Array.filter()是仅数组类型可用的方法，你代码中调用filter的this.filtered[i].categories[y]是单个字符串/数字类型的分类值，不是数组，因此触发类型错误。
从你的输出截图也能验证：console.log(this.filtered[i].categories[y])输出的是单个分类名称，不是集合。

正确实现逻辑 #

你的需求是筛选出所有categories字段包含输入值的条目，直接用数组迭代方法即可实现，无需嵌套循环：

// value为你从HTML输入框获取的比对值
const matchedList = this.filtered.filter(post => {
  // 检查当前条目的分类数组是否包含目标值
  return post.categories.includes(value)
})

// 后续直接遍历matchedList，将内容拼接后写入innerHTML即可
console.log(matchedList)

如果需要处理类型不一致的情况（比如分类存的是数字ID，输入值是字符串），可以调整判断逻辑：

const matchedList = this.filtered.filter(post => {
  return post.categories.some(cate => String(cate) === String(value))
})

原有代码的问题说明 #

• for...in语法优先用于遍历普通对象的属性，遍历数组建议用for...of或者数组自带的迭代方法（filter、map、forEach等），避免意外遍历到原型链属性
• 你之前的嵌套循环已经遍历到了分类数组的单个元素，不需要再对单个元素做筛选，直接比对即可

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