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 相关文章推荐
利用JS重写Cognos右键菜单的实现代码
Apr 11 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python删除不需要的python文件方法
2018/04/24 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python 项目目录结构设置
2020/02/14 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
旅游业大学生创业计划书
2014/01/31 职场文书
大学生毕业评语
2014/12/31 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
关于感恩的作文
2019/08/26 职场文书