Vue中文数组根据文字首字母拼音排序、筛选 |
您所在的位置：网站首页 › 百家姓的排序方法 › Vue中文数组根据文字首字母拼音排序、筛选 |
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数组，查看数组是否经过排序。 二、看描述，觉得麻烦的话，我来帮你分步骤走 安装依赖包npm install pinyin按照上面形式引入依赖包把函数复制粘贴到methods中，把数据请求更改为你项目中的接口请求形式,然后在data中声明三个数组:cityData，copycityData,lettersArr (cityData，copycityData为空数组),letter数组翻看上面第四个代码区块进行复制粘贴基础操作完毕，在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 |
【本文地址】
今日新闻 |
推荐新闻 |