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 07 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
javascript如何写热点图
2015/12/08 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Python浅复制中对象生存周期实例分析
2018/04/02 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python中turtle库的使用实例
2019/09/09 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
关键字final的用法
2013/10/02 面试题
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
校长寄语大全
2014/04/09 职场文书
环保建议书200字
2014/05/14 职场文书
美国留学经济担保书
2014/05/20 职场文书
岗位说明书标准范本
2014/07/30 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
护士个人总结范文
2015/02/13 职场文书
如何用python插入独创性声明
2021/03/31 Python
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android