React typescript - 将数组拆分为字母组答案

【问题标题】：React typescript - split array into alphabetical groupsReact typescript - 将数组拆分为字母组
【发布时间】：2022-01-16 01:42:16
【问题描述】：

我有一个包含许多 (100+) 单词的字符串数组，我已按字母顺序对数组进行了排序，但我想将数组分组或拆分为哈希数组 hashMap<String(Alphabet), List<String>>，所以我可以用这种样式显示它：

const stringArray = [
    "Apple",
    "animal",
    "Apart",
    "ball",
    "backpack",
    "ballers",
    "bingo",
    "cars",
    "Careful",
    "Coach"
  ]

 {stringArray && stringArray?.sort(function (a, b) {
            if (a < b) { return -1; }
            if (a > b) { return 1; }
            return 0;
          }).map(word => (
            <hr><hr />
            <p>{word}</p>
          ))}

【问题讨论】：

您的阵列看起来如何？将其添加到问题本身中。至少添加部分数组。
添加了一个数组的简单示例
您能展示一下您尝试过的结果，以便我们帮助调试吗？
好吧，结果只是按字母顺序列出了每个单词，例如：动物分开苹果背包等

标签： javascript arrays reactjs typescript

【解决方案1】：

您可以使用Map 或使用普通对象轻松实现结果：

使用地图的现场演示

使用对象的现场演示

const arr = [
  "Apple",
  "animal",
  "Apart",
  "ball",
  "backpack",
  "ballers",
  "bingo",
  "cars",
  "Careful",
  "Coach",
];
const getFilteredArr = (arr) => {
  const map = new Map();
  arr
    .sort((a, b) => a.localeCompare(b))
    .forEach((str) =>
      !map.has(str[0].toLowerCase())
        ? map.set(str[0].toLowerCase(), [str])
        : map.get(str[0].toLowerCase()).push(str)
    );
  return [...map];
};
const newArray = getFilteredArr(arr);

return (
  <>
    <div>
      {newArray.map(([key, values]) => {
        return (
          <div key={key}>
            <h1>{key}</h1>
            {values.map((str) => (
              <p key={str}>{str}</p>
            ))}
          </div>
        );
      })}
    </div>
  </>
);

【讨论】：

感谢现场演示，不使用地图可以吗？我的意思是也许只是检查第一个字符，因为它已经排序了？或者这是最优雅的方式吗
有很多方法可以做到这一点，这只是其中之一。您也可以使用普通对象。
您只需要分隔以相同字符开头的单词，因为您可以使用任何算法。但我发现使用 Map 也是最简单、最简单、最高效的。
顺便说一句，我收到return [...map]ErrorMsg Type 'IterableIterator<[any, any]>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators. 的此错误
如果这不起作用，那么您可以在答案中使用为您创建的另一个演示。看看

【解决方案2】：

你不需要自定义排序功能，JS默认按字母排序。所以首先对你的话进行排序：

words.sort();

然后遍历它们并将它们添加到第二张地图中，该地图以起始字母为键：

const letterMap = new Map();
words.forEach(word => {
  const letter = word[0].toUpperCase();
  if (!letterMap.has(letter)) letterMap.set(letter, []);
  letterMap.get(letter).push(word);
});

现在letterMap 看起来像：{'A': ['Apple', 'Animal', ...], 'B': [...]}，您可以使用 letterMap.entries 迭代 this：

const HTML = [...letterMap.entries()].forEach((letter, words) => {
  return `${letter}<hr><hr />` +
         `<p>${words.join(' ')}</p>`;
})

【讨论】：