Vue项目中统计JSON键名含_Valid且值为true的属性数量如何实现

实现方案 #

这个需求完全可以实现，核心只需要同时满足两个判断规则：键名包含_Valid字符串、对应值严格等于true，再遍历累加符合条件的项即可。

基于reduce的实现代码 #

首先用Object.entries()把目标JSON对象转为可遍历的键值对数组，再通过reduce做累加统计：

// 假设你从接口拿到的JSON数据存储为变量 rawData
const validTotal = Object.entries(rawData).reduce((count, [key, value]) => {
  // 匹配两个规则则计数+1，否则返回当前计数值
  return key.includes('_Valid') && value === true ? count + 1 : count
}, 0)

代码逻辑说明：

• reduce的第二个参数0是统计初始值，代表初始计数为0
• 回调函数的第一个参数count是每一轮迭代的累计计数值
• 回调函数的第二个参数用解构语法直接拿到当前遍历项的键key和值value
• key.includes('_Valid')是JS字符串原生方法，可直接判断字符串是否包含指定片段，刚好满足你按键名部分内容过滤的需求

更易理解的替代写法（不用reduce） #

如果暂时不熟悉reduce的用法，也可以用filter过滤后直接取数组长度，结果完全一致：

const validTotal = Object.keys(rawData).filter(key => {
  return key.includes('_Valid') && rawData[key] === true
}).length

你提供的示例数据中，符合条件的共有3项，运行上述代码后得到的validTotal值为3，可以直接放到Vue的计算属性中使用。

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