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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 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程序员工具
2008/05/26 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
Javascript Global对象
2009/08/13 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
JS中数组重排序方法
2016/11/11 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
全面了解python中的类,对象,方法,属性
2016/09/11 Python
快速查询Python文档方法分享
2017/12/27 Python
python3.4实现邮件发送功能
2018/05/28 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
学生自我鉴定范文
2013/10/04 职场文书
学校消防安全制度
2014/01/30 职场文书
国培教师自我鉴定
2014/02/12 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python