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

Posted 2023-03-13

【中文标题】React typescript - 将数组拆分为字母组

【英文标题】：React typescript - split array into alphabetical groups

【发布时间】：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>
          ))

【问题讨论】：

您的阵列看起来如何？将其添加到问题本身中。至少添加部分数组。

添加了一个数组的简单示例

您能展示一下您尝试过的结果，以便我们帮助调试吗？

好吧，结果只是按字母顺序列出了每个单词，例如：动物分开苹果背包等

【参考方案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>`;
)