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 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
php5.2时间相差8小时
2007/01/15 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php代码架构的八点注意事项
2016/01/25 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Javascript模板技术
2007/04/27 Javascript
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
javascript中的面向对象
2017/03/30 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
vue实现循环切换动画
2018/10/17 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python如何安装下载后的模块
2020/07/03 Python
python 如何设置守护进程
2020/10/29 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
民族精神月活动总结
2014/08/28 职场文书
标准版离职证明书
2014/09/12 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python