JavaScript如何按对象parentClass属性分组提取name拼接为目标字符串

实现思路 #

• 遍历原始数组，以parentClass为分组键，将同组对象的name属性收集为数组
• 将分组结果按要求格式拼接为输出字符串即可

最简实现（ES6+，性能为O(n)，适配数百条数据无压力） #

// 示例原始数组，注意属性值为字符串类型，避免变量未定义报错
const originArr = [
  { objectClass : 'Car', parentClass : 'Vehicle', name : 'BMW' },
  { objectClass : 'Bicycle', parentClass : 'Vehicle', name : 'Giant' },
  { objectClass : 'Truck', parentClass : 'Vehicle', name : 'VW' },
  { objectClass : 'Country', parentClass : 'Europe', name : 'Germany' },
  { objectClass : 'Tradition', parentClass : 'Europe', name : 'Hats'}
];

// 第一步：按parentClass分组收集name
const groupMap = originArr.reduce((result, item) => {
  const groupKey = item.parentClass;
  // 分组不存在则初始化
  if (!result[groupKey]) result[groupKey] = [];
  // 如需name全大写匹配示例效果，可改为item.name.toUpperCase()
  result[groupKey].push(item.name);
  return result;
}, {});

// 第二步：拼接为要求的输出格式
const outputStr = Object.entries(groupMap)
  .map(([groupName, nameList]) => `${groupName} : ${nameList.join(', ')}`)
  .join('\n');

console.log(outputStr);

运行输出和要求的效果完全一致：

Vehicle : BMW, Giant, VW
Europe : Germany, Hats

兼容旧浏览器的ES5写法 #

如果需要适配不支持ES6语法的环境，可以用普通循环实现：

var groupMap = {};
var i, len, item, groupKey;
for (i = 0, len = originArr.length; i < len; i++) {
  item = originArr[i];
  groupKey = item.parentClass;
  if (!groupMap[groupKey]) groupMap[groupKey] = [];
  groupMap[groupKey].push(item.name);
}

var outputArr = [];
for (groupKey in groupMap) {
  if (groupMap.hasOwnProperty(groupKey)) {
    outputArr.push(groupKey + ' : ' + groupMap[groupKey].join(', '));
  }
}
var outputStr = outputArr.join('\n');

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