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 相关文章推荐
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
javascript中new关键字详解
Dec 14 Javascript
JS代码实现table数据分页效果
May 26 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
jquery append与appendTo方法比较
May 24 jQuery
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
Vue函数式组件-你值得拥有
May 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
使用Angular CLI生成路由的方法
2018/03/24 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
js实现日历
2020/11/07 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
keras中的backend.clip用法
2020/05/22 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
销售业务员岗位职责
2014/01/29 职场文书
2014年预算员工作总结
2014/12/05 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
php访问对象中的成员的实例方法
2021/11/17 PHP
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android