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 相关文章推荐
js 图片轮播(5张图片)
Dec 30 Javascript
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 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实现读取内存顺序号
2015/03/29 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Cython 三分钟入门教程
2009/09/17 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
清明节网上祭英烈活动总结
2014/04/30 职场文书
平安建设工作方案
2014/06/02 职场文书
人代会标语
2014/06/30 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
委托证明书
2014/09/17 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
初一语文教学反思
2016/03/03 职场文书
个人售房合同协议书
2016/03/21 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python