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获取url参数的使用扩展实例
Dec 29 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
深入剖析JavaScript instanceof 运算符
Jun 14 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
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 similar_text 字符串的相似性比较函数
2010/05/26 PHP
JavaScript 数组循环引起的思考
2010/01/01 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python中join和split用法实例
2015/04/14 Python
Python编程入门的一些基本知识
2015/05/13 Python
python结合API实现即时天气信息
2016/01/19 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python实现雨滴下落到地面效果
2018/06/21 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
应聘自荐信
2013/12/14 职场文书
旅游文化节策划方案
2014/06/06 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
爱的教育观后感
2015/06/17 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
大学生创业计划书
2019/06/24 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书