将城市按照拼音首字母进行分类

最新推荐文章于 2023-05-11 14:21:32 发布

追逐春天的大孩子

最新推荐文章于 2023-05-11 14:21:32 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js react 文章标签： js 城市列表按照首字母分类

本文链接：https://blog.csdn.net/weixin_43709908/article/details/107363154

本文介绍了如何利用js-pinyin库对城市列表进行拼音首字母分类，详细阐述了下载和使用该库的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将城市名称按照首字母进行分类，使用js-pinyin包，首先第一步下载包

npm i js-pinyin

import React,{Component} from 'react'
import pyjs from 'js-pinyin'  //包下载完成之后在要使用的页面进行引入
const cityList=[
    {
        value:'北京',
        label:'北京'
    },
    {
        value:'上海',
        label:'上海'
    },
    {
        value:'安徽',
        label:'安徽'
    },
    {
        value:'河南',
        label:'河南'
    },
    {
        value:'山东',
        label:'山东'
    },
    {
        value:'吉林',
        label:'吉林'
    },
]
class City extends Component{
    state={
        cityjson:{},
        cityArr:[],
        FristPin:["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
    }
    componentDidMount(){
        // pinyin.setOptions({checkPolyphone: false, charCase: 0});
        const {cityArr,FristPin,cityjson}=this.state
        for (let i=0;i<cityList.length;i++) {
            // let cityName=cityList[i].value // //遍历数组,拿到城市名称