前端开发中按照汉字首字母排序分组

2021-06-03 16:33:00 阅读：757 来源： 互联网

在前端开发过程中，按照汉字首字母排序分组是很常见的操作，比如联系人列表、微信联系人列表

安装第三方插件 npm i --save jian-pinyin

GitHub插件地址 https://github.com/xinglie/pinyin

在需要使用到的vue页面引入 import Pinyin from '../lib/node_modules/jian-pinyin/index'

具体方法参考以下demoPinyin 代码块

demoPinyn() {
    let origin = ['上饶', '上海', '深圳', '广州', '武汉', '十堰', '天津', '北京']
    // 先将汉字排序，用到原生的sort方法， 这一步是将首字母相同的进行排序， 如 上饶、上海、深圳都是'S'开头
    origin = origin.sort((pre, next) => pre.localeCompare(next))
    // 构造 Object 用来存储分组排序的数据
    const newObj = {}
    // 遍历第一轮排序后的数据，按照汉字首字母进行分组
    // Pinyin.getSpell方法用来获取汉字的拼音，默认传一个参数，如果遇到多音字，需要传第二个参数(是一个function)来决定取第几个读音,这里根据具体需求，demo中取的第二个读音
    origin.map(item => {
        // 获取汉字的首字母
        let key = Pinyin.getSpell(item, (char, spell) => {
            return spell[1]
        })[0].toUpperCase()
        // 如果对象中已有key，则push
        if (newObj.hasOwnProperty(key)) {
            newObj[key].push(item)
        } else { // r如果对象中没有这个key，则为这个key构造value，这里value是一个数组
            this.$set(newObj, key, [item])
        }
    })
    console.log('newObj----------->', newObj)
    //  打印出结果 newObj = { B: ["北京"], G: ["广州"], S: ["上海", "上饶", "深圳", "十堰"], T: ["天津"], W: ["武汉"] }
    return newObj
},

标签：item,汉字,newObj,首字母,分组,key,排序,前端开发
来源： https://blog.csdn.net/StoneG_G/article/details/117526246

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端开发中按照汉字首字母排序分组