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截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
js实现计时器秒表功能
Dec 16 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
PHP4之COOKIE支持详解
2006/10/09 PHP
自动分页的不完整解决方案
2007/01/12 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
php创建多级目录的方法
2015/03/24 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python爬取代理ip的示例
2020/12/18 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
各营销点岗位职责范本
2014/03/05 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
办公室管理规章制度
2015/08/04 职场文书
信息技术课教学反思
2016/02/23 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python