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


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 相关文章推荐
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
js实现微信分享代码
Oct 11 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
用PHP来写记数器(详细介绍)
2006/10/09 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
javascript处理table表格的代码
2010/12/06 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python做量化投资系列之比特币初始配置
2018/01/23 Python
python DataFrame 取差集实例
2019/01/30 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python 硬币兑换问题
2019/07/29 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
计算机多媒体专业自荐信
2014/07/04 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
一行Python命令实现批量加水印
2022/04/07 Python