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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JSON简介以及用法汇总
Feb 21 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
微信小程序实现日历效果
Dec 28 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
js no-repeat写法 背景不重复
2009/03/18 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
浅谈JavaScript闭包
2019/04/09 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
TensorFlow 合并/连接数组的方法
2018/07/27 Python
python多线程与多进程及其区别详解
2019/08/08 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
年终考核评语
2014/01/19 职场文书
运动会广播稿200米
2014/01/27 职场文书
人事主管岗位职责
2014/01/30 职场文书
教师考察材料范文
2014/06/03 职场文书
食品工程专业求职信
2014/06/15 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python