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判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
JavaScript中DOM详解
Apr 13 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
微信小程序实现一张或多张图片上传(云开发)
Sep 25 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 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/07/14 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
Python实现屏幕截图的两种方式
2018/02/05 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
Mac安装python3的方法步骤
2019/08/09 Python
详解Python3定时器任务代码
2019/09/23 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
外企C语言笔试题
2013/11/10 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
八月迷情观后感
2015/06/11 职场文书
单位更名证明
2015/06/18 职场文书