相信 有很多 同仁们,尤其是初学者,在记住 Array对象 sort() 方法的排序,规则上,有点困难; 其实sort()方法已经在实际工作中用到很多遍了,可当我仔细推敲,这个sort()方法,什么时候是升序排列,什么时候是倒序排列 的时候,还真是有点小懵圈;

先来看一下,官网上是怎么说的吧:

这是我在W3C上截来的一张图,起初,读这个说明的时候,大概理解,要表达的意思,可是当我细细琢磨红框框出来的部分的时候,就有点不太理解了;

然后在 W3C上看到,这样一个例子:

<script type="text/javascript">
function sortNumber(a,b)
{
  return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1" document.write(arr + "<br />")
document.write(arr.sort(sortNumber)) </script>

用这个 sortNumber() 函数,可以做到 将数值数组做到 升序排列; 于是 我就做了一下测试,又得到了 可以倒序排列数组数组的函数(其实 这个东西网上一查有很多);

function descSortNumber(a,b)
{
  return b-a;
}

好,到此为止,我们可以对一个数值数组做 升序 和 降序 的排列; 可是由此 问题就来了,为什么, return a-b 就是升序, return b-a 就是降序,这到底是个什么规律呢??? 声明 一下,这里不解释该方法的底层实现原理,只是讲述一个 帮助记忆的规律方法。

于是,就有仔细读了一下 上边图片中的 红框的位置,得到下面的4个函数:

        // 升序排列
function asc( a,b ){
return (a<b ? -1 : 1);
} function asc2(a,b){
return (a>b ? 1 : -1);
} // 降序排列
function desc( a, b ){
return (a<b ? 1 : -1);
} function desc2( a, b ){
return (a>b ? -1 : 1);
}

测试 之后,array.sort(asc) 可以升序排列,array.sort(desc) 可以降序排列;可是,在使用的时候,这四个函数 用起来的时候不免后有些错乱,当然,就四个函数返回xxx时,升序;返回yyy时,降序;完全可以凭记忆 强行记下来,可是本人 就是有个按总结规律,爱钻牛角的毛病;于是在冥思苦相之下,总结出了一套规律,与同仁们分享一下:

  前提:

在return时,无论a>b 还是 a<b, 任选其一, 用(a-b)与 三项表达式 条件为true时的结果(即“?”后第一个结果)做 乘,得到的结果 为正数,则升序;为负数,则降序; 

拿上边四个函数中的 desc(a,b) return (a<b ? 1 : -1)做例:

  first: (a - b) 为 -abs(a-b) , 即, -(a-b)的绝对值( 是一个负数);

  second: 三项表达式 条件true时,结果为 1(是一个正数);

  third: -abs(a-b) * 1 结果为一个 负数;

    forth: 得到结果-->此函数可以达到 倒序 排列数组 的目的;

 

记忆规律 介绍完毕,下面,上一端我写的 关于各类数组排序 的代码,以待后用,也希望对同仁们 有用:

var _p = (function( _ ){
/********************************************************** ##.数组排序 Array.sort()类 *****************************************************/
/*
* @1. 按照字符编码的顺序进行排序,即:先转成字符串再排序
* applay: Array.sort( _.codeSort );
*/
_.codeSort = function(){
//do nothing....
}; /*
* @2. 按照数字 升序排序
* applay:Array.sort( _.numAscSort ); 适用于数字数组的排序
*/
_.numAscSort = function(){
return function(a,b){
return a - b;
};
}; /*
* @3. 按照数字 降序排序
* applay:Array.sort( _.numDescSort ); 适用于数字数组的排序
*/
_.numDescSort = function(){
return function(a,b){
return b - a;
};
}; /*
* @4. 对象数组 升序排列(object array asc)
* applay: Array.sort( _.objAscBy('name',fn) ); 适用于:[{},{},{},....]
* description: 先按对象数组中的obj的某个元素进行排序,如果其中两个相等的话,则这两个再按 minor(typeof==='function')规则进行
*/
_.objAscBy = function(name, minor){ //object array asc (对象数组 升序排列)
return function(o,p){
var a,b;
if(o && p && typeof o === 'object' && typeof p === 'object'){
a = o[name];
b = p[name];
// 1.完全相等的时候 看自定义规则 minor,存在则按 minor进行比较;否则返回0,不排序;
if(a === b){
return typeof minor === 'function'?minor(o,p):0;
} // 2.同类型 按 大小排序
if(typeof a === typeof b ){
return a < b ? -1 : 1;
} // 3.按 类型排序
if( typeof a !== typeof b ){
return typeof a < typeof b ? -1 : 1;
} }
else {
throw ("error");
}
};
}; /*
* @5. 对象数组 降序排列(object array desc)
* applay: Array.sort( _.objDescBy('name',fn) ); 适用于:[{},{},{},....]
* description: 先按对象数组中的obj的某个元素进行排序,如果其中两个相等的话,则这两个再按 minor(typeof==='function')规则进行
*/
_.objDescBy = function(name, minor){
return function(o,p){
var a,b;
if(o && p && typeof o === 'object' && typeof p === 'object'){
a = o[name];
b = p[name];
// 1.完全相等的时候 看自定义规则 minor,存在则按 minor进行比较;否则返回0,不排序;
if(a === b){
return typeof minor === 'function' ? minor(o,p) : 0;
} // 2.同类型 按 大小排序
if(typeof a === typeof b ){
return a < b ? 1 : -1;
} // 3.按 类型排序
if( typeof a !== typeof b ){
return typeof a < typeof b ? 1 : -1;
} }
else {
throw ("error");
}
};
}; /**
* @author: jcy
* @apply: Array.sort( _.arrAscBy(i,fn) ); 适用于:[ [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], ... ]
* 适用于 要排序的对象是一个 包含n个子数组 的数组, 以这n个子数组中的某一个位置的元素 将这n个子数组 进行排序
* @eg: a = [ [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], ... ]
* 将 a 数组中的所有子数组,以子数组中的第2个位置的元素,将所有子数组进行排序
*/
_.arrAscBy = function(i, minor){ //array array asc(数组数组 升序排列)
return function(o,p){
var a,b;
if( o && p && typeof o === 'object' && typeof p === 'object' ){
a = o[i];
b = p[i];
// 1.完全相等的时候 看自定义规则 minor,存在则按 minor进行比较;否则返回0,不排序;
if(a === b){
return typeof minor === 'function'?minor(o,p):0;
} // 2.同类型 按 大小排序
if(typeof a === typeof b ){
return a < b ? -1 : 1;
} // 3.按 类型排序
if( typeof a !== typeof b ){
return typeof a < typeof b ? -1 : 1;
} }
else {
throw("error");
}
}
}; /**
* @author: jcy
* @apply: Array.sort( _.arrDescBy(i,fn) ); 适用于:[ [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], ... ]
* 适用于 要排序的对象是一个 包含n个子数组 的数组, 以这n个子数组中的某一个位置的元素 将这n个子数组 进行排序
* @eg: a = [ [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], [x,xx,xxx,...], ... ]
* 将 a 数组中的所有子数组,以子数组中的第2个位置的元素,将所有子数组进行排序
*/
_.arrDescBy = function(i, minor){ //array array desc(数组数组 降序排列)
return function(o,p){
var a,b;
if( o && p && typeof o === 'object' && typeof p === 'object' ){
a = o[i];
b = p[i];
// 1.完全相等的时候 看自定义规则 minor,存在则按 minor进行比较;否则返回0,不排序;
if(a === b){
return typeof minor === 'function' ? minor(o,p) : 0;
} // 2.同类型 按 大小排序
if(typeof a === typeof b ){
return a < b ? 1 : -1;
} // 3.按 类型排序
if( typeof a !== typeof b ){
return typeof a < typeof b ? 1 : -1;
} }
else {
throw("error");
}
}
}; return _ ; })(_p || {});

 此段代码,  1.可作为插件直接使用;

        2.调用的方式(在每个方法的头部说明中已经 做了说明);

        3.适用的情形(在每个方法的头部说明中已经 做了说明);

为了直观展示用法,上个例子:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="plugin-jack.js"></script>
<script type="text/javascript">
var bigArr =
[
[1,"张家口市",4.07],
[13,"石家庄市",4.12],
[2,"承德市",5.21],
[10,"邯郸市",15.60],
[12,"保定市",11.09],
[4,"秦皇岛市",7.05],
[9,"唐山市",9.27],
[8,"衡水市",8.66],
[7,"沧州市",8.21],
[5,"天津市",17.48],
[6,"廊坊市",7.88],
[3,"北京市",16.15],
[11,"邢台市",10.92]
]; // 按 bigArr数组,每个子数组的索引项为2 的项,将bigArr数组的所有子数组进行 倒序 排序
var CompositeIndex = bigArr.sort( _p.arrDescBy(2) ).concat();
for(var i=0; i<CompositeIndex.length; i++){
document.write(CompositeIndex[i] +"<br>");
}; </script>
</body>
</html>

结果:

5,天津市,17.48
3,北京市,16.15
10,邯郸市,15.6
12,保定市,11.09
11,邢台市,10.92
9,唐山市,9.27
8,衡水市,8.66
7,沧州市,8.21
6,廊坊市,7.88
4,秦皇岛市,7.05
2,承德市,5.21
13,石家庄市,4.12
1,张家口市,4.07

Javascript Array对象 sort()方法,记忆方法,方法扩展的更多相关文章

  1. JavaScript Array对象sort() 方法小结

    sort() 方法用于对数组的元素进行排序. 语法arrayObject.sort(sortfunction) 参数sortfunction 可选.规定排序顺序.必须是函数. 返回值对数组的引用.请注 ...

  2. JavaScript Array() 对象:push() 和 join() 方法

    <script> var fruits = ["Banana", "Orange", "Apple", "Mango& ...

  3. JavaScript Array 对象

    JavaScript Array 对象 Array 对象 Array 对象用于在变量中存储多个值: var cars = ["Saab", "Volvo", & ...

  4. Array 对象-sort()

    Array 对象-sort() sort方法对数组成员进行排序,默认是按照字典顺序排序.排序后,原数组将被改变. sort方法不是按照大小排序,而是按照字典顺序.也就是说,数值会被先转成字符串,再按照 ...

  5. 浏览器端-W3School-浏览器端:JavaScript Array 对象

    ylbtech-浏览器端-W3School-浏览器端:JavaScript Array 对象 1.返回顶部 1. Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对 ...

  6. JavaScript Array 对象(length)方法 (contact、push,pop,join,map、reverse、slice、sort)

    一.Array对象属性 1.length 设置或返回数组中元素的数目. 数组的 length 属性总是比数组中定义的最后一个元素的下标大 1.对于那些具有连续元素,而且以元素 0 开始的常规数组而言, ...

  7. JavaScript Number 对象 Javascript Array对象 Location 对象方法 String对象方法

    JavaScript Number 对象 Number 对象属性 属性 描述 constructor 返回对创建此对象的 Number 函数的引用. MAX_VALUE 可表示的最大的数. MIN_V ...

  8. JavaScript Array 对象方法 以及 如何区分javascript中的toString()、toLocaleString()、valueOf()方法

    1.concat() 2.join() 3.pop() 4.push() 5.reverse() 6.shift() 7.unshift() 8.slice() 9.sort() 10.splice( ...

  9. JavaScript Array对象

    介绍Js的Array 数组对象. 目录 1. 介绍:介绍 Array 数组对象的说明.定义方式以及属性. 2. 实例方法:介绍 Array 对象的实例方法:concat.every.filter.fo ...

随机推荐

  1. windows连接远程打印机

    windows连接hp的远程打印机时,自动装不了驱动.. 需打开驱动程序(驱动程序安装需接设备),然后windows就过下载驱动这步了..

  2. mysql分表技术

    一般来说,当我们的数据库的数据超过了100w记录的时候就应该考虑分表或者分区了,这次我来详细说说分表的一些方法. 目前我所知道的方法都是MYISAM的,INNODB如何做分表并且保留事务和外键,我还不 ...

  3. jQuery ajax 动态append创建表格出现不兼容ie8

    非常多情况下.通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是非常方便的 可是不同的浏览器针对动态生成的不是非常兼容,在此遇见的不兼容ie8.跟各位分享下 代码: json数 ...

  4. Mac中pico编辑器的使用方法

    Pico是一个由华盛顿大学(University of Washington)计算与通讯研究所(Computing and Communications Group)编写并维护的文本编辑程序,在多个版 ...

  5. Vue入门之旅:一报错 Unknown ... make sure to provide the "name" option及error compiling template

    报错一: Unknown custom element: <custom-select> - did you register the component correctly? For r ...

  6. C++ primer记录

    关于C++编程风格,可参考:Google 开源项目风格指南 第一章:开始 1. 头文件:由于嵌套包含文件的原因,一个头文件可能会被多次包含在一个源文件中.条件指示符可防止这种头文件的重复处理,例如:# ...

  7. 三、直播整体流程 五、搭建Nginx+Rtmp直播流服务

    HTML5实现视频直播功能思路详解_html5教程技巧_脚本之家 https://m.jb51.net/html5/587215.html 三.直播整体流程 直播整体流程大致可分为: 视频采集端:可以 ...

  8. responsive and functional programming RxJava

    RxJava由于使用了多个回调,一开始理解起来可能有点难度,其实多看几遍也就明白了,它的招式套路都是一样的: 首先就是创建Observable,创建Observable有很多种方式,这里使用了Obse ...

  9. Chrome 默认样式 (user agent stylesheetbody) 优先级变高的问题

    解决方法:只需要在页面的<HTML>标签前添加声明即可. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional ...

  10. 解决: ./netapp.bin: error while loading shared libraries: libcaffe.so.1.0.0: cannot open shared object file: No such file or directory 运行时报错(caffe)

    caffe安装好后lib没有配置到/usr/lib或/usr/local/lib中,需手动配置: export LD_LIBRARY_PATH=/path_to_your_caffe/build/li ...