时间戳

首页 > 解决方案 > 按字母顺序呈现名称列表并按其第一个字符分组

javascript - 按字母顺序呈现名称列表并按其第一个字符分组

问题描述

我需要按字母顺序呈现名称列表，并按每个名称的起始字母分组。它应该如下所示：

**A**

Anders
Anton
Angela

**B**

Brian
Bernard

**C**

Carl

我当前的解决方案可以对对象中包含的所有名称进行排序，但我无法在名称之前添加起始字母作为元素（例如，在“Anders”上方呈现“A”，在“Brian”上方呈现“B”）

当前解决方案：

completeEmpList = empList
  .sort((a, b) => a.Name.localeCompare(b.Name))
    .map((emp) => (
      <div> {emp.Name} </div>
    ))

它不应该处理最多超过 300 个元素的数据，因此在这种情况下优化并不那么重要。

标签： javascriptreactjs

解决方案

您可以先排序，然后使用reduce创建一个对象并按每个名称的第一个字符对值进行分组。

var data = [
  { Name: 'Carl' },
  { Name: 'Anders' },
  { Name: 'Anton' },
  { Name: 'Brian' },
  { Name: 'Bernard' },
  { Name: 'Angelaa' },
];

const App = ({ data }) => {
  const parsedData = React.useMemo(() => {
    const obj = data.reduce((r, { Name }) => {
      const l = Name[0];
      if (!r[l]) r[l] = [Name];
      else r[l].push(Name);
      return r;
    }, {});

    const sorted = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));

    return sorted;
  }, [data]);

  return parsedData.map(([key, value]) => (
    <div key={key}>
      <strong>{key}</strong>
      <ul>
        {value.map(v => (
          <li key={v}>{v}</li>
        ))}
      </ul>
    </div>
  ));
};

ReactDOM.render(<App data={data} />, document.querySelector('#root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读