Javascript 通过循环字母表映射对象

我希望能够循环遍历字母表中的每个字母，然后如果json对象中的StoreName与循环字母匹配，则将其映射到li标记。我想对字母表中的每个字母都这样做，如果没有匹配，就什么也不显示

希望这是有意义的

例如：

这就是我目前所拥有的

import { data } from './data/data';
import { useState } from 'react';

export default function Home() {
  const [values, setValues] = useState(data);

  return (
    <div>
      {values.filter(store => store.storeName.startsWith('a'))
      .map((item, index) => (   
        <li key={index}>
          {item.storeName}
        </li>
      ))}

    </div>
  )
}

我知道我可以手动过滤和映射每个字母，但必须有一种方法来循环遍历字母表和映射

示例输出：

A

• 阿迪达斯
• 阿克塞尔

B

• 布利克斯
• 贝尼斯

c

• 阴蒂

d

---

因此，我希望显示字母，然后显示以该循环字母开头的每个循环项目的结果。

听起来您希望按首字母对数据点进行分组。你描述的算法会起作用，但它不是我会选择的

我会这样做：

按字母顺序对所有商店进行排序

遍历已排序的存储区，跟踪最新的首字母

• 每次当前门店的首字母与最近的首字母不同时，插入分组边界（例如，关闭以前的

  并打开新的分组边界）
  
  

最后，不要在JSX中实现这一点。它可能不是世界上最复杂的算法，但如果这种数据准备逻辑与一堆显示文字混合在一起，没有人会喜欢它。相反，将数据作为纯数据处理。记住，“插入分组边界”只意味着更改将存储插入的组

---

下面是对实现的运行。（我还没有测试过。）

功能MyComponent（道具）{
//按首字母将商店分组
//生成{initialLetter:'a'，stores:[store1，store2，store3]}的列表
让prevInitialLetter=null
让groupedStores=stores
.sort（sort\u storeName\u alpha）
.reduce（（组、存储）=>{
让myInitialLetter=store.storeName.charAt（0）
让belongsInNewGroup=myInitialLetter！==prevInitialLetter
如果（属于工作组）{
//创建新组并将此存储添加为其第一个成员
push（{initialLetter:myInitialLetter，stores:[store]}）
}否则{
//将此存储添加到上一个组
组[groups.length-1].stores.push（存储）
}
返回组
}, [])
返回(
{
groupedStores.map（组=>(

{group.initialLetter}
{
group.stores.map（store=>(

{store.storeName}

)
}

))
}
)
}
//这是最粗糙的文本排序；根据您的需要，
//您可能需要执行区域设置感知比较
函数排序\u storeName\u alpha=（a，b）=>{
如果（a.storeName

你可以列一张字母表，并通过它绘制地图

import { data } from "./data/data";
import React, { useState } from "react";

const alphabet = "abcdefghijklmnopqrstuvwxyz";

export default function Home() {
  const [values, setValues] = useState(data);

  return (
    <div>
      {alphabet.split("").map((c) => {
        return (
          <>
            <p>{c}</p>
            {values
              .filter((store) => store.storeName.startsWith(c))
              .map((item, index) => (
                <li key={index}>{item.storeName}</li>
              ))}
          </>
        );
      })}
    </div>
  );
}

从“/data/data”导入{data}；
从“React”导入React，{useState}；
const alphabet=“abcdefghijklmnopqrstuvxyz”；
导出默认函数Home（）{
const[values，setValues]=使用状态（数据）；
返回(
{字母表拆分（“”）.map（（c）=>{
返回(
{c}

{值
.filter（（store）=>store.storeName.startsWith（c））
.map（（项目、索引）=>(
{item.storeName}
))}
);
})}
);
}

---

这与仅仅迭代所有存储并为它们创建

li

元素有何不同。我的意思是，如果你要循环整个字母表，你最终会匹配所有存储，对吗？那么为什么不把它们全部取下来呢？我用所需的输出更新了这个问题，希望它能帮助你注意

是无效的

的孩子啊，想想看，这么简单！真不错

function MyComponent( props ) {
    // group the stores by initial letter
    // produces a list of { initialLetter: 'A', stores: [ store1, store2, store3 ] }
    let prevInitialLetter = null
    let groupedStores = stores
    .sort(sort_storeName_alpha)
    .reduce(( groups, store ) => {
        let myInitialLetter = store.storeName.charAt(0)
        let belongsInNewGroup = myInitialLetter !== prevInitialLetter
        
        if(belongsInNewGroup) {
            // create a new group and add this store as its first member
            groups.push({ initialLetter: myInitialLetter, stores: [ store ] })
        } else {
            // add this store to the previous group
            groups[groups.length - 1].stores.push(store)
        }
        
        return groups
    }, [])
    
    return (
        <ol className="GroupedStores">
            {
                groupedStores.map(group => (
                    <li className="storeGroup" key={group.initialLetter}>
                        {group.initialLetter}
                        
                        <ol className="stores">
                            {
                                group.stores.map(store => (
                                    <li key={store.storeName}>
                                        {store.storeName}
                                    </li>
                                )
                            }
                        </ol>
                    </li>
                ))
            }
        </ol>
    )
}

// this is the crudest-possible text sort; depending on your needs,
// you may need to perform a locale-aware comparison
function sort_storeName_alpha = ( a, b ) => {
    if(a.storeName < b.storeName) return -1
    if(b.storeName < a.storeName) return 1
    return 0
}

import { data } from "./data/data";
import React, { useState } from "react";

const alphabet = "abcdefghijklmnopqrstuvwxyz";

export default function Home() {
  const [values, setValues] = useState(data);

  return (
    <div>
      {alphabet.split("").map((c) => {
        return (
          <>
            <p>{c}</p>
            {values
              .filter((store) => store.storeName.startsWith(c))
              .map((item, index) => (
                <li key={index}>{item.storeName}</li>
              ))}
          </>
        );
      })}
    </div>
  );
}