如何将餐厅数据数组转换为分类-子项结构的新数组

你可以通过JavaScript的数组方法快速实现这类分组需求，下面提供两种常用方案：

方案一：使用Array.reduce() #

这是处理数组分组最常用的方式，通过累积对象暂存分组数据，最后转换为目标数组：

const restaurants = [
  {
    "category":  { "title": "Appetizers" },
    "id": 1,
    "price": "10",
    "title": "Spinach Artichoke Dip"
  },
  {
    "category":  { "title": "Appetizers" },
    "id": 2,
    "price": "10",
    "title": "Hummus"
  },
  {
    "category":  { "title": "Salads" },
    "id": 3,
    "price": "7",
    "title": "Greek"
  },
  {
    "category":  { "title": "Salads" },
    "id": 4,
    "price": "9",
    "title": "Beyn"
  }
];

const groupedData = Object.values(restaurants.reduce((acc, item) => {
  const categoryTitle = item.category.title;
  // 初始化分类结构（如果不存在）
  if (!acc[categoryTitle]) {
    acc[categoryTitle] = {
      category: categoryTitle,
      items: []
    };
  }
  // 将当前菜品加入对应分类的items数组
  acc[categoryTitle].items.push(item.title);
  return acc;
}, {}));

console.log(groupedData);

逻辑说明 #

1. reduce遍历原始数组，用acc（累积对象）暂存每个分类的分组数据
2. 提取当前菜品的分类标题，检查acc中是否已有该分类
3. 若没有则创建包含分类名和空数组的结构，若有则直接将菜品标题推入对应数组
4. 最后用Object.values()将累积对象的所有值转换为目标数组格式

方案二：使用Map结构 #

如果更倾向于键值对的直观操作，可以用Map来实现：

const restaurants = [/* 原始数据同上 */];

const categoryMap = new Map();

restaurants.forEach(item => {
  const category = item.category.title;
  // 初始化Map中的分类项
  if (!categoryMap.has(category)) {
    categoryMap.set(category, { category, items: [] });
  }
  // 添加菜品到对应分类
  categoryMap.get(category).items.push(item.title);
});

const groupedData = Array.from(categoryMap.values());

逻辑说明 #

1. 创建Map实例，以分类标题为键，目标结构对象为值
2. 遍历原始数组，检查Map中是否存在当前分类，不存在则添加
3. 将当前菜品标题推入对应分类的items数组
4. 用Array.from(map.values())将Map中的值转换为数组

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