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 26 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
关于layui时间回显问题的解决方法
Sep 24 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP strripos函数用法总结
2019/02/11 PHP
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
实例Python处理XML文件的方法
2015/08/31 Python
python实现将内容分行输出
2015/11/05 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python实现简单井字棋游戏
2020/03/04 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Django之腾讯云短信的实现
2020/06/12 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
python selenium 获取接口数据的实现
2020/12/07 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
毕业生自我鉴定
2013/12/04 职场文书
秸秆管理实施方案
2014/03/15 职场文书
五年级学生评语
2014/04/22 职场文书
新学期开学演讲稿
2014/05/24 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
年度考核表个人总结
2015/03/06 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2016年公司新年寄语
2015/08/17 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
Nginx反向代理学习实例教程
2021/10/24 Servers