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 15 Javascript
javascript 得到变量类型的函数
May 19 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
JS验证输入的是否是数字及保留几位小数问题
May 09 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
vuejs移动端实现div拖拽移动
Jul 25 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 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+xslt在windows平台上
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
PHP中的self关键字详解
2019/06/23 PHP
自己的js工具 Event封装
2009/08/21 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
Python中is与==判断的区别
2017/03/28 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
车辆委托书范本
2014/10/05 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Kubernetes控制节点的部署
2022/04/01 Servers