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.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python对execl 处理操作代码
2020/06/22 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
入党申请书自我鉴定
2013/10/12 职场文书
保护环境的建议书
2014/03/12 职场文书
中层干部培训方案
2014/06/16 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
青年志愿者活动感想
2015/08/07 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫