如何在Javascript/Vue中根据type字段拆分JSON数组？

实现方案 #

你可以直接用JavaScript的Array.reduce()方法实现按type字段分组，代码简单高效，完全适配Vue技术栈：

核心分组代码

// 假设你的原始数组存放在 rawArray 变量中
const groupedByType = rawArray.reduce((result, item) => {
  const currentType = item.type
  // 对应类型不存在则初始化空数组
  if (!result[currentType]) {
    result[currentType] = []
  }
  // 将当前项推入对应类型的数组
  result[currentType].push(item)
  return result
}, {})

效果说明

执行后你得到的groupedByType是一个对象，键为所有type的取值，值就是对应类型的元素数组，比如：

• groupedByType.SERIES 就是你示例中所有type为SERIES的元素组成的数组
• groupedByType.CHARACTER 就是所有type为CHARACTER的元素组成的数组
  完全匹配你要求的拆分效果。

Vue环境适配

如果是在Vue项目中使用，建议搭配计算属性实现响应式分组，数据更新时自动重新分组，Vue3示例如下：

import { ref, computed } from 'vue'

// 原始响应式数组
const rawList = ref(/* 替换为你的原始JSON数组 */)

// 响应式分组结果
const groupedList = computed(() => {
  return rawList.value.reduce((acc, item) => {
    const type = item.type || 'OTHER' // 兜底处理无type的异常数据
    if (!acc[type]) acc[type] = []
    acc[type].push(item)
    return acc
  }, {})
})

可选扩展

如果你需要数组格式的分组结果，可以额外做一步转换：

const groupArray = Object.entries(groupedByType).map(([type, list]) => ({
  type,
  dataList: list
}))

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