如何在JS中统计对象数组内指定字段匹配值的出现次数

你给出的示例数组如下：

const arrayOfItems = [{id: 1, title: "Pizza"}, {id: 2, title: "Pizza"}, {id: 3, title: "Pasta"}]

方案1：filter方法（最简实现，适合仅统计单一品类的场景） #

逻辑是过滤出所有title为Pizza的元素，直接取结果数组的长度即可：

const pizzaCount = arrayOfItems.filter(item => item.title === 'Pizza').length

• 优点：写法简洁直观，可读性高
• 缺点：如果后续需要同时统计多个品类的数量，性能不如reduce，需要多次遍历数组

方案2：reduce方法（灵活度高，适合购物车多品类统计场景） #

仅统计Pizza数量的写法： #

const pizzaCount = arrayOfItems.reduce((total, currentItem) => {
  return currentItem.title === 'Pizza' ? total + 1 : total
}, 0)

扩展为全品类统计的写法（适合购物车多商品数量展示） #

如果后续需要同时统计Pasta、Drink等其他品类的数量，可以一次性生成全品类的统计对象，避免多次遍历数组：

const goodsCountMap = arrayOfItems.reduce((map, item) => {
  // 如果当前品类不存在，初始化为0后再加1
  map[item.title] = (map[item.title] || 0) + 1
  return map
}, {})

// 使用时直接取对应品类的数值即可
const pizzaCount = goodsCountMap.Pizza // 输出2
const pastaCount = goodsCountMap.Pasta // 输出1

• 优点：仅需遍历数组一次，扩展性强，适合购物车这类需要统计多类商品数量的场景
• 注意：如果你的购物车商品项存在count字段（代表单个商品的加购数量），统计时替换+ 1为+ item.count即可适配带数量的加购统计逻辑。

方案3：for循环遍历（兼容性最好） #

如果需要兼容非常旧的运行环境，不支持ES6高阶函数，可以用基础for循环实现：

let pizzaCount = 0
for (let i = 0; i < arrayOfItems.length; i++) {
  if (arrayOfItems[i].title === 'Pizza') {
    pizzaCount++
  }
}

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