Javascript 数组排序详解


Posted in Javascript onOctober 22, 2014

如果你接触javascript有一段时间了,你肯定知道数组排序函数sort,sort是array原型中的一个方法,即array.prototype.sort(),sort(compareFunction),其中compareFunction是一个比较函数,下面我们看看来自Mozilla MDN 的一段描述:
If compareFunction is not supplied, elements are sorted by converting them to strings and comparing strings in lexicographic (“dictionary” or “telephone book,” not numerical) order. For example, “80″ comes before “9″ in lexicographic order, but in a numeric sort 9 comes before 80.

下面看些简单的例子:

// Output [1, 2, 3]

console.log([3, 2, 1].sort());
// Output ["a", "b", "c"]

console.log(["c", "b", "a"].sort());
// Output [1, 2, "a", "b"]

console.log(["b", 2, "a", 1].sort());

从上例可以看出,默认是按字典中字母的顺序来排序的。

幸运的是,sort接受一个自定义的比较函数,如下例:

function compareFunction(a, b) {

 if( a > b) {

  return -1;

 }else if(a < b) {

  return 1;

 }else {

  return 0;

 }

}

//Outputs ["zuojj", "Benjamin", "1"] 

console.log(["Benjamin", "1", "zuojj"].sort(compareFunction));

排序完我们又有个疑问,如何控制升序和降序呢?

function compareFunction(flag) {

 flag = flag ? flag : "asc";

 return function(a, b) {

  if( a > b) {

   return flag === "desc" ? -1 : 1;

  }else if(a < b) {

   return flag === "desc" ? 1 : -1;

  }else {

   return 0;

  }

 };

}

//Outputs ["1", "Benjamin", "zuojj"] 

console.log(["Benjamin", "1", "zuojj"].sort(compareFunction()));

//Outputs ["zuojj", "Benjamin", "1"] 

console.log(["Benjamin", "1", "zuojj"].sort(compareFunction("desc")));

comparFunction的排序规则是这样的:
1.If it returns a negative number, a will be sorted to a lower index in the array.
2.If it returns a positive number, a will be sorted to a higher index.
3.And if it returns 0 no sorting is necessary.

下面我们来看看摘自Mozilla MDN上的一段话:
The behavior of the sort method changed between JavaScript 1.1 and JavaScript 1.2.为了解释这段描述,我们来看个例子:

In JavaScript 1.1, on some platforms, the sort method does not work. This method works on all platforms for JavaScript 1.2.

In JavaScript 1.2, this method no longer converts undefined elements to null; instead it sorts them to the high end of the array.详情请戳这里。

var arr = [];

arr[0] = "Ant";

arr[5] = "Zebra";

//Outputs ["Ant", 5: "Zebra"] 

console.log(arr);

//Outputs 6

console.log(arr.length);

//Outputs "Ant*****Zebra"

console.log(arr.join("*"));

//排序

var sortArr = arr.sort();

//Outputs ["Ant", "Zebra"] 

console.log(sortArr);

//Outputs 6

console.log(sortArr.length);

//Outputs "Ant*Zebra****"

console.log(sortArr.join("*"));

希望本文对你学习和了解sort()方法有帮助,文中不妥之处还望批评斧正。

参考链接:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Javascript 相关文章推荐
Jquery时间验证和转换工具小例子
Jul 01 Javascript
Bootstrap基础学习
Jun 16 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
jquery validation验证表单插件
Jan 07 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue前端工程的搭建
Mar 31 Vue.js
Javascript中arguments对象详解
Oct 22 #Javascript
Javascript中的默认参数详解
Oct 22 #Javascript
js style动态设置table高度
Oct 21 #Javascript
js读写json文件实例代码
Oct 21 #Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 #Javascript
javascript Deferred和递归次数限制实例
Oct 21 #Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
python如何保存文本文件
2020/06/07 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
生产部经理岗位职责
2013/12/16 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
公司周年庆典致辞
2015/07/30 职场文书
小学生安全教育主题班会
2015/08/12 职场文书