JavaScript Sort 的一个错误用法示例


Posted in Javascript onMarch 20, 2015

前不久同事的代码中出了一个很神奇的问题,大致流程是对一个由对象组成的数组进行排序,其中属性 a 用于排序,属性 b 作为一个优选条件,当 b 等于 1 的时候无论 a 值是什么,都排在开头 。这本是一个很简单的问题,问题就在于他用两次 sort 实现在这次排序,先根据 a 的属性排序,然后再根据 b 的值来排序。问题就出在第二次排序中。

我们想当然的会认为在第一次排序中,数组已经根据 a 的属性由大到小排序,在第二次中我们只要不去动原数组的顺序就行(一般在方法中写成返回0或-1),只考虑单独把 b 等于 1 的元素提到前面去。但是其实这与语言所选用的排序算法有关,javascript (和一起其他语言)内置的 sort 方法采用的是几种排序算法的集合,有时并不能保证相同元素的位置保持一致。

下面是从 stackoverflow 上面找来的一个例子

var arrayToSort = [

  {name: 'a', strength: 1}, {name: 'b', strength: 1}, {name: 'c', strength: 1}, {name: 'd', strength: 1},

  {name: 'e', strength: 1}, {name: 'f', strength: 1}, {name: 'g', strength: 1}, {name: 'h', strength: 1},

  {name: 'i', strength: 1}, {name: 'j', strength: 1}, {name: 'k', strength: 1}, {name: 'l', strength: 1},

  {name: 'm', strength: 1}, {name: 'n', strength: 1}, {name: 'o', strength: 1}, {name: 'p', strength: 1},

  {name: 'q', strength: 1}, {name: 'r', strength: 1}, {name: 's', strength: 1}, {name: 't', strength: 1}

];
arrayToSort.sort(function (a, b) {

  return b.strength - a.strength;

});
arrayToSort.forEach(function (element) {

  console.log(element.name);

});

我们会以为最后元素的值还是从 a 到 t,但实际运行下来的结果却是乱序的,这是因为 sort 的算法并没有保留原数组的顺序,也即 unstable。

那么我们就该尽量避免这种情况发生,就我同事的例子,将两次 sort 的逻辑合并在一次中应该是个可行的办法,如果必须分为多次 sort,那么就把原数组的顺序记录在元素的属性上把。

Javascript 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
JS中的作用域链
Mar 01 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Postman内建变量常用方法实例解析
Jul 28 Javascript
JS实现的数组全排列输出算法
Mar 19 #Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 #Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 #Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 #Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 #Javascript
JS中prototype的用法实例分析
Mar 19 #Javascript
JS获取Table中td值的方法
Mar 19 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
提高php编程效率技巧
2015/08/13 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
python实现rsa加密实例详解
2017/07/19 Python
python3.x实现发送邮件功能
2018/05/22 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
安全保证书范文
2014/04/29 职场文书
团委工作总结2015
2015/04/02 职场文书
城南旧事观后感
2015/06/11 职场文书
2016年元旦主持词
2015/07/06 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python图片检索之以图搜图
2021/05/31 Python