JavaScript如何遍历对象属性 将键值映射为指定字段生成对象数组

核心结论 #

完全不需要定义类来实现这个需求，这种简单的数据结构转换用JavaScript原生对象、数组方法就能快速实现，定义类属于不必要的过度设计。

实现方法 #

你拿到的分类计数是标准的键值对对象，只需要遍历对象的所有键值对，将每个键映射为categoryTitle字段，对应数值转为字符串后赋值给count字段即可。

最简实现（推荐） #

用Object.entries()直接获取对象的所有键值对，搭配数组map方法一步生成目标数组：

// 源分类计数对象
const categoryCount = {blonde: 2, corrections: 2, offers: 1, products: 1, style: 1};

const tabs = Object.entries(categoryCount).map(([categoryTitle, count]) => ({
  categoryTitle,
  count: String(count)
}));

注意：你给出的目标示例中第三个分类标题为offer，但源对象对应键名为offers，如果确实需要修正键名，可以加一层简单映射处理：

const keyReplaceMap = { offers: 'offer' };
const tabs = Object.entries(categoryCount).map(([key, count]) => ({
  categoryTitle: keyReplaceMap[key] ?? key,
  count: String(count)
}));

兼容旧环境的写法 #

如果运行环境不支持Object.entries()，也可以用Object.keys()先拿到所有分类名再遍历，效果完全一致：

const tabs = Object.keys(categoryCount).map(key => ({
  categoryTitle: key,
  count: String(categoryCount[key])
}));

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