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


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 相关文章推荐
html下载本地
Jun 19 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
vue组件系列之TagsInput详解
May 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
ThinkPHP之R方法实例详解
2014/06/20 PHP
php中执行系统命令的方法
2015/03/21 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
js分页工具实例
2015/01/28 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
2019/09/10 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
Python 字符串池化的前提
2020/07/03 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
2014年师德承诺书
2014/05/23 职场文书
文明生主要事迹
2014/05/25 职场文书
商场父亲节活动方案
2014/08/27 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
学生通报表扬范文
2015/05/04 职场文书
2016年安全月活动总结
2016/04/06 职场文书
如何做好员工培训计划?
2019/07/09 职场文书