JavaScript 中按状态分组并生成自然语言描述的数组扁平化处理-js教程-PHP中文网

本文介绍如何将具有相同 state 值的对象数组进行逻辑分组，并生成符合中文表达习惯的汇总文案，如“your temperature, ph is very high.”，重点在于语义化聚合而非简单数组展平。

本文介绍如何将具有相同 state 值的对象数组进行逻辑分组，并生成符合中文表达习惯的汇总文案，如“your temperature, ph is very high.”，重点在于语义化聚合而非简单数组展平。

在实际前端开发中，我们常需将结构化的告警或指标数据（如传感器状态）转换为用户友好的自然语言提示。原始数据通常以对象数组形式存在，每个对象包含 key（指标名）、state（状态描述）、level（严重等级）等字段。目标不是物理意义上的数组扁平化（如 flat()），而是按语义维度（如 state）聚合同类项，再构造可读性高的句子。

核心思路分为两步：

按 state 分组：使用 reduce() 构建一个以 state 为键、对应对象数组为值的哈希表；
映射生成句子：遍历分组结果，对每组提取所有 key 并用逗号连接，拼接成 “Your X, Y is [state].” 格式，最后用空格合并所有句子。

以下是完整实现：

js2java

JavaScript 到 Java 全栈翻译助手，专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能： - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写，想翻译成 Java" - "教我 Java，我要写后端接...

下载

function textMaker(data) {
  // 步骤1：按 state 分组
  const grouped = data.reduce((groups, item) => {
    const { state } = item;
    if (!groups[state]) groups[state] = [];
    groups[state].push(item);
    return groups;
  }, {});

  // 步骤2：为每组生成句子并合并
  return Object.entries(grouped)
    .map(([state, items]) => {
      const keys = items.map(item => item.key).join(", ");
      return `Your ${keys} is ${state}.`;
    })
    .join(" ");
}

// 示例数据
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(textMaker(alerts));
// 输出：Your temperature, pH is very high. Your galvanic is very low.

✅ 注意事项：

若需支持国际化（如中文输出），可将模板字符串中的 "Your" 和 "is" 替换为对应语言的占位符，或引入 i18n 库；
当某组仅含一个 key 时，当前语法（is）仍适用；若需语法更严谨（如单复数区分），可扩展判断逻辑：keys.split(', ').length === 1 ? 'is' : 'are'；
state 值应确保为合法字符串（避免 undefined 或空格导致分组异常），建议在分组前做基础校验；
如需按 level（如 red/green）进一步筛选（如只展示高危告警），可在调用前先 filter(item => item.level === 'red')。

该方法兼顾可读性与可维护性，适用于仪表盘提示、健康报告摘要等场景，是数据驱动文案生成的典型实践。