非你网

在某些场景下，需要对区域进行首字母排序。不仅要提取出地区的首字母，并且还要对相同首字母的地区也进行排序。

开始

首先，我们有这样的一些数据：

var cityData = [
    [
        {
            "label":"北京市",
            "value":1101
        }
    ],
    [
        {
            "label":"天津市",
            "value":1201
        }
    ],
    [
        {
            "label":"石家庄",
            "value":1301
        },
        {
            "label":"唐山",
            "value":1302
        },
        {
            "label":"秦皇岛",
            "value":1303
        }
    ]
]

这是一个二维数组，可以先把它弄成一维数组。然后通过 pinyin.js 取出每个 label 的首字母，并且有相同首字母的数据放在同一个数组里。然后进行二次排序。这里在 pinyin.js 中新增加了一个 getFirstChar 方法。

    /**
     * 获取整个词汇的首字母
     * @param {String} str 输入的中文字符串
     */
    getFirstChar(str) {
        if (typeof(str) != "string")
            throw new Error(-1, "函数getCamelChars需要字符串类型参数!");

        if (!str) {
            throw new Error(-1, "不能是空字符串");
        }

        str = str.substr(0, 1);
        return this._getChar(str);
    }

计算如下。

import Pinyin from '../../../static/js/pinyin.js';

let pinyin = new Pinyin();

let temp = {};
let keys = [];
for(let item1 of city) {
    for(let item2 of item1) {
        if (item2.label == '直辖市') {
            continue;
        }

        let fc = pinyin.getFirstChar(item2.label);
        if (temp[fc]) {
            temp[fc].push(item2);
        } else {
            keys.push(fc);
            temp[fc] = [item2];
        }
    }
}
keys = keys.sort();

let list = [{
     title: '热门',
     letter: 'hot',
     value: []
}]

function sortItem(item1, item2) {
    return item1['label'].localeCompare(item2['label']);
}

for(let key of keys) {
    list.push({
        title: key,
        letter: key,
        value: temp[key].sort(sortItem)
    });
}

参考类库

https://github.com/waterchestnut/pinyin

https://www.w3school.com.cn/js/jsref_localeCompare.asp