Vue中文数组根据文字首字母拼音排序、筛选

目录

一、Vue项目根据一个中文数组进行拼音排序，并且根据拼音进行数据过滤

pinyin:文档地址:https://www.npmjs.com/package/pinyin

函数中一共有三个变量是视图中使用到的：lettersArr，cityData，copycityData。

二、看描述，觉得麻烦的话，我来帮你分步骤走

三、完善，上面只是按照拼音首字母做了排序，产品又说了一下理想化排序应该是文字相同的并列排序

总结：个人认为这种中文数组排序的话，首先我们应该考虑这个数据是什么形式的，如果是地理位置或者人为关注度的，我们需要考虑用户可能会关注主要的几个地理位置（因为后续用户可能会要求我想要关注这个我想关心的几条数据，想把它们放在前面），这个时候可能我们需要考虑在系统中，是否给用户一个手动设置地理位置权重的页面路口可能会更好，类似路由权限设置。

---

一、Vue项目根据一个中文数组根据拼音排序，并且根据拼音进行数据过滤

这里以全国城市作为示例,数据地址

GitHub - modood/Administrative-divisions-of-China: 中华人民共和国行政区划：省级（省份直辖市自治区）、 地级（城市）、 县级（区县）、 乡级（乡镇街道）、 村级（村委会居委会） ，中国省市区镇村二级三级四级五级联动地址数据。

话不多说，先上效果图，如果不是你想要的的，就不浪费你的时间，可以关闭该窗口。eg:

先介绍一下展示效果的一些说明，左侧*代表所有的城市数据，不做数据过滤，#代表文本第一个文字不是中文的数据。

接下来开始介绍开发用到的依赖包,

pinyin:文档地址:pinyin - npm

安装方式

npm install pinyin

然后在.vue文件中单独引入

var pinyin = require("pinyin");

接下来先贴上基础函数

getFirstPin() {
      const _ = this;
      api.mockdata("/data/citys", {}, 'get').then(res => {
        let wordArrs = res.citys;
        let newArrs = [];
        for (let i = 0; i < wordArrs.length; i++) {
          //获取每条数据里的名称
          let wordName = wordArrs[i].name;
          //获取所有名称的首字母，并且大写
          let fristName = pinyin(wordName, { style: pinyin.STYLE_NORMAL, heteronym: true })[0][0].substring(0, 1).toUpperCase();
          //进行判断，给原始json数据添加新的键值对
          if (this.lettersArr.includes(fristName)) {
            wordArrs[i].first = fristName;
          } else {
            wordArrs[i].first = "#"
          }
          // 选种状态
          wordArrs[i].isSelect = false;
          //放入新的数组中
          newArrs.push(wordArrs[i])
        }
        let wordJson = [];
        for (let i = 0; i < _.lettersArr.length; i++) {
          newArrs.forEach((el) => {
            if (_.lettersArr[i] === el.first) {
              wordJson.push(el);
            }
          });
        }
        _.cityData = _.copycityData = wordJson;
        if (_.cityData.length > 0) {
          _.cityData[0].isSelect = true;  // 默认选种第一条数据
        }
      })
    },

我这里是本地获取的数据，所以是api.mockdata伪造ajax请求形式做的操作，实际操作一般都是axios请求接口数据

函数中一共有三个变量是视图中使用到的：lettersArr，cityData，copycityData。

这三个变量根据上面操作，可以看出都是声明的数组变量，lettersArr是字母索引数组，cityData是城市视图显示数组，copycityData是城市数据暂存数组（用于数据筛选、过滤）；

data声明中，cityData，copycityData都是【】空数组,

lettersArr声明数组做数值匹配,

 ['*', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']

按照上面的形式进行操作，你可以在请求接口函数最后一行打印wordJson数组，查看数组是否经过排序。

二、看描述，觉得麻烦的话，我来帮你分步骤走

1. 安装依赖包npm install pinyin
2. 按照上面形式引入依赖包
3. 把函数复制粘贴到methods中，把数据请求更改为你项目中的接口请求形式,
4. 然后在data中声明三个数组:cityData，copycityData,lettersArr (cityData，copycityData为空数组),letter数组翻看上面第四个代码区块进行复制粘贴
5. 基础操作完毕，在created中执行函数,并且在上述函数中的接口请求函数最后一行打印wordJson数组

三、完善，上面只是按照拼音首字母做了排序，产品又说了一下理想化排序应该是文字相同的并列排序

请看下面的描述demo

 var arr = ['张三', '张亮', '李四', '王并', '里斯', '张三丰', '李雷'];
// 排序后得到['李四','里斯','李雷','王并','张三','张亮','张三丰'](可以看到，首字母按照了A~Z排序，但是后续相同文字没有并列排序)

// 实际效果需要得到数组:['李雷','李四','里斯','王并','张亮','张三','张三丰'];不仅第一个文字按拼音排序，后续文本也按照A~Z排序
function sortChinese(arr) {
 arr.sort(function (item1, item2) {
     return item1.localeCompare(item2, 'zh-CN');// localeCompare为string内置函数
   })
}
sortChinese(arr)
console.log(arr); // ["李雷", "李四", "里斯", "王并", "张亮", "张三", "张三丰"]

为什么不直接执行第三步呢，说一下，其实一开始找排序的时候，我发现这个函数刚好满足我的需求，但是我发现localeCompare这个内置函数无法对我数据中的多音字进行有效识别，比如把‘长’开头的文本识别到了Z字母下面，所以我进行了上述的安装依赖包进行多音识别分类，然后再进行这个数据处理

总结：个人认为这种中文数组排序的话，首先我们应该考虑这个数据是什么形式的，如果是地理位置或者人为关注度的，我们需要考虑用户可能会关注主要的几个地理位置（因为后续用户可能会要求我想要关注这个我想关心的几条数据，想把它们放在前面），这个时候可能我们需要考虑在系统中，是否给用户一个手动设置地理位置权重的页面路口可能会更好，类似路由权限设置。

应邀：贴上仓库地址

https://e.coding.net/mogui-13/Vuecli3_test/VueAdmin.git