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


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从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
详解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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP goto语句用法实例
2019/08/06 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
TensorFlow的权值更新方法
2018/06/14 Python
python字符串循环左移
2019/03/08 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
口头翻译求职人自荐信
2013/12/07 职场文书
志愿者活动总结范文
2014/04/26 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
医生辞职信范文
2015/03/02 职场文书