JavaScript 按相同值扁平化数组并生成数据文本描述

我有一个如下结构的数组，需要按相同的state值对数组进行分组，生成对应的文本描述。

示例数组：

[
  {level: 'red', state: 'very high', key: 'temperature', value: '37.7'},
  {level: 'red', state: 'very high', key: 'pH', value: '7.5'},
  {level: 'green', state: 'very low', key: 'galvanic', value: '34'}
]

期望输出：
Your temperature, pH is very high. Your galvanic is very low.

我尝试了以下代码，但没能实现需求，求正确解法：

function textMaker(alert){
  let flatArray = alert.reduce((acc, curVal) => {
      return acc.concat(curVal.key);
  }, []);

  return "Your <span>"+flatArray.join(", ")+"</span> is <span>quite high</span>.";
}

const alerts = [
  {level: 'red', state: 'very high', key: 'temperature', value: '37.7'},
  {level: 'red', state: 'very high', key: 'pH', value: '7.5'},
  {level: 'green', state: 'very low', key: 'galvanic', value: '34'}
]
let redAlerts = alerts.filter((item) => item.level === "red");

console.log(textMaker(redAlerts));

解决方案 #

核心逻辑是先按state将数组分组，再针对每组生成描述语句，最后拼接所有语句。

代码实现

function generateAlertText(alerts) {
  // 按state分组，收集同state对应的key
  const groupedByState = alerts.reduce((groups, alert) => {
    const state = alert.state;
    groups[state] = groups[state] || [];
    groups[state].push(alert.key);
    return groups;
  }, {});

  // 生成每个分组的描述句子
  const sentences = Object.entries(groupedByState).map(([state, keys]) => {
    return `Your ${keys.join(', ')} is ${state}.`;
  });

  // 拼接句子并包裹strong标签
  return `<strong>${sentences.join(' ')}</strong>`;
}

const alerts = [
  {level: 'red', state: 'very high', key: 'temperature', value: '37.7'},
  {level: 'red', state: 'very high', key: 'pH', value: '7.5'},
  {level: 'green', state: 'very low', key: 'galvanic', value: '34'}
];

console.log(generateAlertText(alerts));

代码说明

1. 分组处理：通过reduce遍历数组，将相同state的key值收集到同一个数组中，形成以state为键的对象
2. 生成语句：遍历分组后的对象，为每组生成格式统一的描述句子
3. 结果拼接：将所有句子用空格连接，并包裹<strong>标签，得到最终符合要求的输出

内容的提问来源于stack exchange，提问作者The Old County