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

目录

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

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

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

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

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

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


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

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

https://github.com/modood/Administrative-divisions-of-China

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

Vue中文数组根据文字首字母拼音排序、筛选_第1张图片

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

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

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

安装方式

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) == true) {
            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字母下面,所以我进行了上述的安装依赖包进行多音识别分类,然后再进行这个数据处理

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

你可能感兴趣的:(JS,Vue,Vue中文首字母排序)