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 面向对象编程  function是方法(函数)
Sep 17 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
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中对xml读取的相关函数的介绍一
2008/06/05 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
详解Python中dict与set的使用
2015/08/10 Python
python 中如何获取列表的索引
2019/07/02 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
区分python中的进程与线程
2020/08/13 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
html5简介及新增功能介绍
2020/05/18 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
催款律师函范文
2015/05/27 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Python绘画好看的星空图
2022/03/17 Python