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 相关文章推荐
广告代码静态化js通用函数
May 09 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
简述JS控制台的使用
Jul 15 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
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 将dataurl转成图片image方法总结
2016/10/14 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
2018/10/09 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
python实现一次创建多级目录的方法
2015/05/15 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python制作Windows系统服务
2017/03/25 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
详解Python3注释知识点
2019/02/19 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
工商学院毕业生个人自我评价
2013/09/19 职场文书
自我评价如何写好?
2014/01/05 职场文书
受伤赔偿协议书
2014/09/24 职场文书
法律意见书范文
2015/05/20 职场文书
党员公开承诺书2016
2016/03/24 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技