⼀、Vue项⽬根据⼀个中⽂数组根据拼⾳排序，并且根据拼⾳进⾏数据过滤 话不多说，先上效果图，如果不是你想要的的，就不浪费你的时间，可以关闭该窗⼝。eg:
先介绍⼀下展⽰效果的⼀些说明，左侧*代表所有的城市数据，不做数据过滤，#代表⽂本第⼀个⽂字不是中⽂的数据。接下来开始介绍开发⽤到的依赖包,
pinyin:⽂档地址:
安装⽅式
npm install pinyin
然后在.vue⽂件中单独引⼊
var pinyin = require("pinyin");
getFirstPin() {
const _ = this;
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; // 默认选种第⼀条数据
}
})
},
我这⾥是本地获取的数据，所以是kdata伪造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. 按照上⾯形式引⼊依赖包
adm2587
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字母下⾯，所以我进⾏了上述的安装依赖包进⾏多⾳识别分类，然后再进⾏这个数据处理
总结：个⼈认为这种中⽂数组排序的话，⾸先我们应该考虑这个数据是什么形式的，如果是地理位置
或者⼈为关注度的，我们需要考虑⽤户可能会关注主要的⼏个地理位置（因为后续⽤户可能会要求我想要关注这个我想关⼼的⼏条数据，想把它们放在前⾯），这个时候可能我们需要考虑在系统中，是否给⽤户⼀个⼿动设置地理位置权重的页⾯路⼝可能会更好，类似路由权限设置。
应邀：贴上仓库地址
/mogui-13/Vuecli3_test/VueAdmin.git
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议