小程序中英文混合排序问题解决


Posted in Javascript onAugust 02, 2019

小程序中英文混合排序问题

在开发一个手机联系人列表的功能时,遇到需求是需要将联系人列表按照拼音顺序排序。而联系人列表是会出现中英文混合的情况。于是遇到了问题。

小程序无法直接中文进行排序

localeCompare函数排序出来的结果不正确

在遇到这个问题的时候,也去网上查过不少,本来觉得比较好用的就是例佣localeCompare函数去进行排序。但是在实际开发的时候发现该函数的排列结果跟网上的不同。(大概是h5跟小程序的区别吧,我也不是很了解~)

最终参考了字母表的方式,采取了类似的做法来实现我的需求,代码如下

/* 返回拼音的首字母大写 */
 getCName(_char) {
  if (_char <= 'z' && _char >= 'A') {
   return _char.toUpperCase();
  }
  for (var item in pinyin) {
   if (pinyin[item].indexOf(_char) != -1)
    return item[0].toUpperCase();
  }
 },
  /* 对二维数组排序,并返回处理完逻辑的结果 */
 sortTwoArr(arr) {
  let res_arr=[];
  for (var j = 0; j < arr.length; j++) {
   for (var i = 0; i < arr.length - 1; i++) {
    if (arr[i+1][0] < arr[i][0]) {
     let temp = arr[i][0];
     arr[i][0] = arr[i+1][0];
     arr[i+1][0] = temp;
     
     let temp_ = arr[i][1];
     arr[i][1] = arr[i+1][1];
     arr[i+1][1] = temp_;
    }
   }
  }  
  arr.forEach((item)=>{
   res_arr.push(item[1])
  })
  return res_arr;
 }

在onLoad()函数调用

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
  let arr = ['猫', '狐狸', '鸟', '大雁', 'A','彦杰','燕','朕成功','陈奕迅'];
  let arr1 = [];
  arr.forEach((item, index) => {
   var _char = item.substr(0, 1);
   let temp = [this.getCName(_char), item]
   arr1.push(temp);
  })
  console.log(this.sortTwoArr(arr1))
 },

结果演示

小程序中英文混合排序问题解决

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
jQuery的each终止或跳过示例代码
Dec 12 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
前端性能优化建议
Sep 17 Javascript
详解JWT token心得与使用实例
Aug 02 #Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 #Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 #Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 #Javascript
超轻量级的js时间库miment使用解析
Aug 02 #Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 #Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 #Javascript
You might like
重新认识php array_merge函数
2014/08/31 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
JS 表单验证大全
2011/11/23 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
如何转换一个字符串到enum值
2014/04/12 面试题
家属答谢词
2015/01/05 职场文书
研究生个人学年总结
2015/02/14 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python