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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
SSM VUE Axios详解
Oct 05 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
2006/11/25 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
深入浅析php json 格式控制
2015/12/24 PHP
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
js利用iframe实现选项卡效果
2020/08/09 Javascript
python 二分查找和快速排序实例详解
2017/10/13 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
如何教少儿学习Python编程
2020/07/10 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
《锄禾》教学反思
2014/04/08 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL