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


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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
JS画5角星方法介绍
Sep 17 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
详解JavaScript 作用域
Jul 14 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代码
2006/12/06 PHP
PHP重定向的3种方式
2013/03/07 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
基于Python函数和变量名解析
2019/07/19 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
python中pickle模块浅析
2020/12/29 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
管道维修工岗位职责
2013/12/27 职场文书
2014年党员整改措施
2014/10/24 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
车间班组长竞聘书
2015/09/15 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
python实现网络五子棋
2021/04/11 Python
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
python基础之文件操作
2021/10/24 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js