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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
echart简介_动力节点Java学院整理
Aug 11 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
js右键菜单效果代码
2007/07/21 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
document.getElementById介绍
2011/09/13 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python实现最大优先队列
2019/08/29 Python
运动会解说词100字
2014/01/31 职场文书
主持词开场白
2014/03/17 职场文书
钳工实训报告总结
2014/11/04 职场文书
教师个人教学总结
2015/02/11 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android