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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
Java 生成随机字符的示例代码
Jan 13 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
用ODBC的分页显示
2006/10/09 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP取进制余数函数代码
2012/01/19 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
python3个性签名设计实现代码
2018/06/19 Python
Python 变量的创建过程详解
2019/09/02 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
django跳转页面传参的实现
2020/09/17 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
军训心得体会
2013/12/31 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
医学求职信
2014/05/28 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
创业计划书之服装
2019/10/07 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
2022年四月新番
2022/03/15 日漫
Web应用开发TypeScript使用详解
2022/05/25 Javascript