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.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
jQuery事件详解
Feb 23 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Django实现表单验证
2018/09/08 Python
python 实现倒排索引的方法
2018/12/25 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Django如何使用redis作为缓存
2020/05/21 Python
如何把python项目部署到linux服务器
2020/08/26 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
网络编辑职责
2014/03/01 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
明星员工获奖感言
2014/08/14 职场文书
安全温馨提示语大全
2015/07/14 职场文书