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 相关文章推荐
JavaScript插件化开发教程 (一)
Jan 27 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
js友好的时间返回函数
Aug 24 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
vue穿梭框实现上下移动
Jan 29 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
客服主管岗位职责
2013/12/13 职场文书
英语老师推荐信
2014/02/26 职场文书
股权转让意向书
2014/04/01 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
MySQL分区表实现按月份归类
2021/11/01 MySQL