JavaScript中按相同parent键分组遍历对象数组并拼接表达式

需求说明 #

现有如下JavaScript对象数组：

const arrayOfObjects = [
  { parent: 'relatedParty', child: 'role === CEO', andOr: '&&' },
  { parent: 'relatedParty', child: 'name === Arun', andOr: '||' },
  { parent: 'relatedParty', child: ' id === 123', andOr: '&&' },
  { parent: 'custom', child: 'contact === DAP', andOr: '||' },
  { parent: 'custom', child: 'team==dap', andOr: '&&' },
  { parent: 'multiple', child: 'key ===keys', andOr: '||' },
  { parent: 'multiple', child: 'value=== values', andOr: '&&' }
];

需要实现：

1. 按parent属性值将对象分组
2. 每组内将child与对应的andOr拼接成表达式
3. 最终生成二维数组形式的结果（每个组的表达式单独放在子数组中）

实现代码 #

// 第一步：按parent字段分组
const groupedByParent = arrayOfObjects.reduce((grouped, item) => {
  // 如果当前parent对应的组不存在，初始化空数组
  if (!grouped[item.parent]) {
    grouped[item.parent] = [];
  }
  grouped[item.parent].push(item);
  return grouped;
}, {});

// 第二步：拼接每组的表达式并生成目标二维数组
const finalResult = Object.values(groupedByParent).map(group => {
  // 遍历组内每个元素，拼接child和andOr，再用空格连接
  const expression = group.map(obj => `${obj.child} ${obj.andOr}`).join(' ');
  // 将拼接后的表达式放入子数组，返回该子数组
  return [expression.trim()];
});

console.log(finalResult);

代码说明 #

1. 分组逻辑：使用Array.reduce()遍历原数组，构建以parent值为键、对应组对象数组为值的对象，完成分组。
2. 表达式拼接：通过Object.values()取出所有分组数组，对每个分组用map()将每个对象转换为child + 空格 + andOr的字符串，再用join(' ')拼接成完整表达式，最后将表达式放入子数组，组成最终的二维数组。

输出结果 #

执行代码后，输出结果如下：

[
  ["role === CEO && name === Arun ||  id === 123 &&"],
  ["contact === DAP || team==dap &&"],
  ["key ===keys || value=== values &&"]
]

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