vue.js或js实现中文A-Z排序的方法


Posted in Javascript onMarch 08, 2018

实现中文按照A-Z的方法,可以在vue的methods里面写入:

methods:{
        pySort:function(arr,empty){
          var $this = this;
          if(!String.prototype.localeCompare)
            return null;
          var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split('');
          var zh = "阿八嚓哒??发旮哈讥咔垃???噢?r七??P它?夕丫??".split('');
          var arrList = [];
          for(var m =0;m<arr.length;m++){
            arrList.push(arr[m].name);
          }
          var result = [];
          var curr;
          for(var i=0;i<letters.length;i++){
            curr = {letter: letters[i], data:[]};
            if(i!=26){
              for(var j =0;j<arrList.length;j++){
                var initial = arrList[j].charAt(0);//截取第一个字符
                if(arrList[j].charAt(0)==letters[i]||arrList[j].charAt(0)==letters[i].toLowerCase()){  //首字符是英文的
                  curr.data.push(arrList[j]);
                }else if(zh[i]!='*'&&$this.isChinese(initial)){   //判断是否是无汉字,是否是中文
                  if(initial.localeCompare(zh[i]) >= 0 &&(!zh[i+1]||initial.localeCompare(zh[i+1]) <0)) {  //判断中文字符在哪一个类别
                    curr.data.push(arrList[j]);
                  }
                }
              }
            }else{
              for(var k =0;k<arrList.length;k++){
                var ini = arrList[k].charAt(0);      //截取第一个字符
                if(!$this.isChar(ini)&&!$this.isChinese(ini)){
                  curr.data.push(arrList[k]);
                }
              }
            }
            if(empty || curr.data.length) {
              result.push(curr);
              //curr.data.sort(function(a,b){
              //  return b.localeCompare(a);    //排序,英文排序,汉字排在英文后面
              //});
            }
          }
          return result;
        },
        isChinese:function(temp){
          var re=/[^\u4E00-\u9FA5]/;
          if (re.test(temp)){return false;}
          return true ;
        },
        isChar:function(char){
          var reg = /[A-Za-z]/;
          if (!reg.test(char)){return false ;}
          return true ;
        }
       }

将从php中获取的json对象转换成数组,vue中直接调用->this.pySort(arr); js直接调用pySort(arr)方法即可    即可实现按照A-Z的格式排序

如下图在控制台输出的格式:

vue.js或js实现中文A-Z排序的方法

letter中存放键值A-Z

data:存放排序后的数组

至于vue中需要放在页面中,使用v-for循环即可 v-for="(key,value) in arr"

需要获取data数组的值,继续使用v-for="tmp in (key.data)"循环在你想输入摆放的元素中

写的比较简单,这个方法在js中也通用

希望这篇文章可以帮助到需要排序的亲~~~~

Javascript 相关文章推荐
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
javascript去除空格方法小结
May 21 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 #Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
vue.js中$set与数组更新方法
Mar 08 #Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 #Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 #Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
openflashchart 2.0 简单案例php版
2012/05/21 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
调试php程序的简单步骤
2019/10/04 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Django models文件模型变更错误解决
2020/05/11 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
招商专员岗位职责
2014/02/08 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书