js sort 二维数组排序的用法小结


Posted in Javascript onJanuary 24, 2014

最近在搞js 排序的问题,因为数据库排序太耗资源,如果能转移到客户端去排序,能大大D减少服务器内存消耗。客户端的话,除了js,就是as了,可惜我as学得太烂,所以只能选择js来研究研究了。。。经过我的测试,js内置方法sort的效率非常高

我们知道在js中默认提供了sort函数,但是这个函数默认是按照数组内容的ascii码升序进行排列的,如果我们要对二维数组排序要如何做呢?在php中是有multi_sort函数可供调用的,但是在js中似乎没有这种函数,但是没关系 ,因为js的sort函数其实也提供了参数可以定义比较函数进行二维数组的排序。

1、按数值排序
假设有如下数组

var arr = [[1, 2, 3], [7, 2, 3], [3, 2, 3]];

这里如果我们要按每个子数组的第一列来排序要如何做呢,我们可以定义一个比较函数:
arr.sort(function(x, y){
  return x[0] ? y[0];
});

这里的比较函数的作用是什么呢?其实是数组依次将数组元素复制给x,y,比如首先将arr[0]赋给x,arr[1]赋给y,然后用x[0] ? y[0],根据返回的值,如果返回的是大于0的数,那么就把数组中x放到y的后面,如果返回的是0则不变,小于0则将x放到y的前面,然后第一个排序好之后在进行下面两个的排序,直到整个数组排序完成。这是默认升序的比较函数,如果要降序排列则只需修改比较方式,改为 return y[0] ? x[0] 即可,这里我们x[0]表示是按第一列进行排序,我们这里也可以按其他列进行排序。这里的排序默认就会修改arr的数组结构,所以排序完arr就是按第一列升序的数组了。

2、按字符串排序
按字符串排序的话呢,我们可以利用js提供的localeCompare方法,
localeCompare作用:用本地特定的顺序来比较两个字符串。
localeCompare方法的使用规则是stringObject.localeCompare(target),如果 stringObject 小于 target,则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target,则该方法返回大于 0 的数。如果两个字符串相等,或根据本地排序规则没有区别,该方法返回 0,器比较使用的是本地的规则,本地规则意思就是使用操作系统底层对这些本地字符排序的规则进行排序,默认情况下比如使用大于号这样的比较只是纯粹比较两个字符的unicode的数大小,会与很多语言不符。
比如

var arr = [['中','国'], ['啊','的'], ['哦','的']];
arr.sort(function(x, y){
  return x[0].localeCompare(y[0]);
});

结果就会按第一列中文字的拼音排序,如果含有英文的话,默认是将英文放在前面,如果是纯英文的话,会按字母顺序来,大写排在小写的后面,这样就可以实现字符串的排序了,包括中文和中英混排。至于要降序排列的话,方法与上面相同,改成return y[0].localeCompare(x[0]); 即可。

这样排序的问题就实现了,js二维数组排序用到的地方还是很多的。希望能帮到些人的忙吧

    function tblSort(s){     
                for(r = 0;r < row_len;r++){
                    arrs[r]=[]
                    for(c=0;c<cel_len;c++){
                        arrs[r][c] ={}//二维数组里再创建一个对象;
                        arrs[r][c].html = table.rows[r].cells[c].innerHTML//取表格HTML放进一个关联数组里面,用于排序后显示在页面上;
                        var text = table.rows[r].cells[c].innerText//取得表格的文字内容用于下面的判断;
                        //检测可能出现的内容如果不是正常的数据就变成负数,排在最后面;
                        if(text == '-'){
                            arrs[r][c].text='-1';
                        }else if(text=='重新检测'){                            
                            arrs[r][c].text='-2';
                        }else if(text=='无百度快照'||text=='无排名数据'){
                            arrs[r][c].text='-3'
                        }else if(text == ''){
                            arrs[r][c].text='-4'
                        }else{
                            arrs[r][c].text=table.rows[r].cells[c].innerText//取表格文字内容放进一个关联数组里面。用于下面的sort做排序。                        }
                    }
                }
               //alert(arrs[0][0]['text'])
               //reve判断当前是正常排序还是反序;
                   if(reve){
                        arrs.sort(function(x,y){
                            return parseFloat(y[s]['text']) - parseFloat(x[s]['text'])                    
                        });
                        reve=0
                    }else{
                        arrs.sort(function(x,y){
                            return parseFloat(x[s]['text']) - parseFloat(y[s]['text'])//排序
                        })
                        reve=1
                    }
                    //将排好的html内容放入表格里
                    for(r = 0;r < row_len;r++){
                        for(c=0;c<cel_len;c++){
                             table.rows[r].cells[c].innerHTML =arrs[r][c]['html']
                        }
                    }
            }
        //表格排序结束
Javascript 相关文章推荐
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
js二维数组排序的简单示例代码
Jan 24 #Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 #Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 #Javascript
JS数组去重与取重的示例代码
Jan 24 #Javascript
关于js数组去重的问题小结
Jan 24 #Javascript
js数组去重的常用方法总结
Jan 24 #Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 #Javascript
You might like
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python二分查找详解
2015/09/13 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Python代码太长换行的实现
2019/07/05 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
集中整治工作方案
2014/05/01 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
2015驻村干部工作总结
2015/04/07 职场文书
医院党建工作总结2015
2015/05/26 职场文书
运动会通讯稿200字
2015/07/20 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python