js根据姓名首字母构造字母索引列表

js根据姓名首字母构造字母索引列表

1、首先安装js-pinyin插件

npm install js-pinyin

2、引入js-pinyin

// npm install js-pinyin下的映入
import pinyin from 'js-pinyin'
// 我的是下载下来将js-pinyin放在了当前文件目录下，如果是放在node_modeule里面的话如上引入就行
import pinyin from './js-pinyin/index.js'

3、利用插件构造字母索引数据结构，调用下面的方法即可

getPyData(info) {
    pinyin.setOptions({
        checkPolyphone: false,
        charCase: 0
    })
    let alphabet = []; //索引字母数组
    let sourceData = info || [] //目标数组
    sourceData.forEach((item, index) => {
        // 获取目标数组每一项的 name 值
        let name = item.name_
        // 获取每一个name值第一个字的大写首字母（传入的 name 是中文时默认得到大写字母，              name 是英文时按照原字符串输出，可能是小写）
        let initial = pinyin.getCamelChars(name).substring(0, 1).toUpperCase()
        // 给数组每一项增加名为 initial 的 key，值就是第一个字的大写首字母
        item.initial = initial
        // 获取用于索引的字母
        if (alphabet.indexOf(initial) === -1) {
            alphabet.push(initial)
        }
    });
    // 按字母表顺序排序
    alphabet.sort()
    let resultData = {}
    // 将源数据按照首字母分类
    alphabet.forEach((item, index) => {
        resultData[item] = sourceData.filter((it) => {
            return it.initial === item
        })
    });
    // 得到最终结果 resultData
    return resultData
},

4、调用上面的方法返回的数据结构如下(没有数据的字母索引不会包含在其中)，可再次基础上构建自己所需要的数据格式

{
    A:[{name:"艾三"}],
    B:[{name:"班三"}],
    C:[{name:"程三"}],
    D:[{name:"度三"}],
    E:[{name:"E三"}],
    F:[{name:"F三"}],
    ......
    Z:[{name:"F三"}],
}