Angular中将字符串数组分割为键值对并按公共键分组实现问题

问题原因 #

你原有代码的问题是每次调用Map.set时直接覆盖对应键的已有值，没有将同个键的多个值收集为数组，导致每个键最终只会保留最后一次存入的内容。

可行实现方案 #

方案1：输出普通对象（匹配你给出的预期输出格式） #

const inputObject = {
  'employees': [
    'bob/january',
    'bob/january-february',
    'bob/january-march',
    'steve/january',
    'steve/january-february',
    'steve/january-march',
    'september',
  ],
};

const outputObject: Record<string, string[] | string> = {};

inputObject.employees.forEach(item => {
  const splitRes = item.split('/');
  // 存在/分隔符的情况
  if (splitRes.length === 2) {
    const key = splitRes[0];
    const val = splitRes[1];
    // 键不存在时先初始化为空数组
    if (!outputObject[key]) {
      outputObject[key] = [];
    }
    (outputObject[key] as string[]).push(val);
  } else {
    // 无分隔符的情况存入n/a
    outputObject['n/a'] = item;
  }
});

执行后outputObject的结构和你给出的预期输出完全一致。

方案2：全数组统一格式（更推荐） #

为了避免后续处理时需要判断值是字符串还是数组，建议统一所有键对应的值都是数组格式，实现代码如下：

const outputObject: Record<string, string[]> = {};

inputObject.employees.forEach(item => {
  const splitRes = item.split('/');
  const key = splitRes.length === 2 ? splitRes[0] : 'n/a';
  const val = splitRes.length === 2 ? splitRes[1] : item;
  
  if (!outputObject[key]) {
    outputObject[key] = [];
  }
  outputObject[key].push(val);
});

该版本输出的n/a对应的值为['september']，类型统一，后续遍历、取值逻辑更简单。

方案3：Map结构版本 #

如果你需要使用Map存储，逻辑和普通对象版本一致：

const outputMap = new Map<string, string[] | string>();

inputObject.employees.forEach(item => {
  const splitRes = item.split('/');
  if (splitRes.length === 2) {
    const key = splitRes[0];
    const val = splitRes[1];
    if (!outputMap.has(key)) {
      outputMap.set(key, []);
    }
    (outputMap.get(key) as string[]).push(val);
  } else {
    outputMap.set('n/a', item);
  }
});

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