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学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Javascript闭包(Closure)详解
May 05 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
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
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
前端必学之PHP语法基础
2016/01/01 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python实现图片文件批量重命名
2020/03/23 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python实现简易淘宝购物
2019/11/22 Python
python实现堆排序的实例讲解
2020/02/21 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
网络工程师专家职业发展路线
2014/02/14 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
python析构函数用法及注意事项
2021/06/22 Python