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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
js实现网页抽奖实例
Aug 05 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHPCMS的使用小结
2010/09/20 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
js Calender控件使用详解
2015/01/05 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python3.7添加dlib模块的方法
2020/07/01 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
给领导的检讨书
2014/02/16 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
爱护花草树木的标语
2014/06/11 职场文书
授权委托书协议书
2014/10/16 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书