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 AJAX回调函数this指向问题
Feb 08 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
详解vue中移动端自适应方案
May 05 Javascript
js实现随机数小游戏
Jun 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
全国中波电台频率表
2020/03/11 无线电
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
文本加密解密
2006/06/23 Javascript
ExtJS 2.0实用简明教程之应用ExtJS
2009/04/29 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
vue-router传参用法详解
2019/01/19 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
python SocketServer源码深入解读
2019/09/17 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
python 模拟登陆163邮箱
2020/12/15 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
营销部内勤岗位职责
2014/04/30 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
教师节班会开场白
2015/06/01 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server