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

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

安装第三方插件   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