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 相关文章推荐
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
关于AOP在JS中的实现与应用详解
May 06 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
vue实现简单图片上传
Jun 30 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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开发需要注意的安全问题
2010/09/01 PHP
Java中final关键字详解
2015/08/10 PHP
php生成验证码函数
2015/10/20 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python CSV模块使用实例
2015/04/09 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python爬取抖音视频的实例分析
2021/01/19 Python
英国航空官网:British Airways
2016/09/11 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
信息学院毕业生自荐信范文
2014/03/04 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
股东合作协议书
2014/04/14 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Hive HQL支持2种查询语句风格
2022/06/25 数据库