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编程起步(第五课)
Feb 27 Javascript
javascript里的条件判断
Feb 27 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
AngularJS实现路由实例
Feb 12 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
Swiper实现导航栏滚动效果
Oct 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
Javascript 二维数组
2009/11/26 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python程序封装为win32服务的方法
2021/03/07 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
个人作风剖析材料
2014/02/02 职场文书
公司保密承诺书
2014/03/27 职场文书
机关会计岗位职责
2014/04/08 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
《1942》观后感
2015/06/08 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js