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获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
js中replace的用法总结
Dec 27 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 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
建立动态的WML站点(一)
2006/10/09 PHP
php存储过程调用实例代码
2013/02/03 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
PHP分页类集锦
2014/11/18 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
python合并文本文件示例
2014/02/07 Python
python基于socket实现网络广播的方法
2015/04/29 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
.NET笔试题(20个问题)
2016/02/02 面试题
思想政治教育专业个人求职信范文
2013/12/20 职场文书
财务主管的岗位职责
2013/12/30 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
环保项目建议书
2014/08/26 职场文书
防震减灾主题班会
2015/08/14 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python