JavaScript之排序函数_动力节点Java学院整理


Posted in Javascript onJune 30, 2017

排序算法

排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小。如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因此,比较的过程必须通过函数抽象出来。通常规定,对于两个元素xy,如果认为x < y,则返回-1,如果认为x == y,则返回0,如果认为x > y,则返回1,这样,排序算法就不用关心具体的比较过程,而是根据比较结果直接排序。

JavaScript的Arraysort()方法就是用于排序的,但是排序结果可能让你大吃一惊:

// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二个排序把apple排在了最后,是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后。

第三个排序结果是什么鬼?简单的数字排序都能错?

这是因为Arraysort()方法默认把所有元素先转换为String再排序,结果'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。

如果不知道sort()方法的默认排序规则,直接对数字排序,绝对栽进坑里!

幸运的是,sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序。

要按数字大小排序,我们可以这么写:

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return -1;
  }
  if (x > y) {
    return 1;
  }
  return 0;
}); // [1, 2, 10, 20]

如果要倒序排序,我们可以把大的数放前面:

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
  if (x < y) {
    return 1;
  }
  if (x > y) {
    return -1;
  }
  return 0;
}); // [20, 10, 2, 1]

默认情况下,对字符串排序,是按照ASCII的大小比较的,现在,我们提出排序应该忽略大小写,按照字母序排序。要实现这个算法,不必对现有代码大加改动,只要我们能定义出忽略大小写的比较算法就可以:

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
  x1 = s1.toUpperCase();
  x2 = s2.toUpperCase();
  if (x1 < x2) {
    return -1;
  }
  if (x1 > x2) {
    return 1;
  }
  return 0;
}); // ['apple', 'Google', 'Microsoft']

忽略大小写来比较两个字符串,实际上就是先把字符串都变成大写(或者都变成小写),再比较。

从上述例子可以看出,高阶函数的抽象能力是非常强大的,而且,核心代码可以保持得非常简洁。

最后友情提示,sort()方法会直接对Array进行修改,它返回的结果仍是当前Array

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象
Javascript 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
js闭包实现按秒计数
Apr 23 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
canvas实现钟表效果
Feb 13 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 #Javascript
详解vue组件通信的三种方式
Jun 30 #Javascript
JavaScript实现瀑布流图片效果
Jun 30 #Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 #Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 #Javascript
jQuery表单设置值的方法
Jun 30 #jQuery
You might like
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
Vue和Bootstrap的整合思路详解
2017/06/30 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
介绍Python中几个常用的类方法
2015/04/08 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
python与字符编码问题
2019/05/24 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
工作失误检讨书范文大全
2014/01/13 职场文书
个人投资计划书
2014/05/01 职场文书
抗震救灾标语
2014/06/26 职场文书
基层党支部整改方案
2014/10/25 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
详解Python函数print用法
2021/06/18 Python