javascript - 使用 Javascript 对区分大小写的值进行分组

Question

考虑这样的场景，我们有模型 ABC23x 、 ABC23X 和 abc23X 。他们指的是同一个模型。此模型名称列表来自 API 端点。

现在 UI 有 2 件事要做:

• 仅显示一个型号名称 (ABC23X)
• 在调用rest api时，我们必须发送所有可能的值([ABC23x，ABC23X，abc23X])

我需要一些帮助来实现此功能。我尝试使用 MAP 进行此操作，但它没有按预期工作。

let models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];
let mappedModels = new Map(models.map(s => [s.toUpperCase(), s]));

console.log(mappedModels);

这是fiddle

我正在使用 Angular 6。任何帮助/建议都会非常有帮助。

Answer 1

您当前遇到的问题是每个新 key 都会覆盖旧 key 。发生的情况如下:

1. 您得到 'tc75X' -> 键为 'TC75X' -> 作为 'TC75X' -> ['tc75X'] 添加到 map
2. 您得到 'TC75X' -> 键为 'TC75X' -> 作为 'TC75X' -> ['TC75X'] 添加到 map 中

所以你只能得到一个值而不是两个。

相反，您应该边走边分组:

1. 如果当前模型没有键，则将其添加到 map 中。
2. 将当前值添加到 map 中。

let models = ['tc75X', 'TC75X', 'tc75x', 'TC75x', 'TC76x', 'TC77Y'];

let mappedModels = models.reduce((map, modelName) => {
  const normalisedKey = modelName.toUpperCase();
  
  //1. Add entry if not present
  if (!map.has(normalisedKey)) {
    map.set(normalisedKey, [])
  }
  
  //2. Add to entry for this key
  map.get(normalisedKey).push(modelName);
  
  return map;
}, new Map())

for(let [key, value] of mappedModels) {
  console.log(key, "->", value);
}