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动态创建div
Sep 25 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
javascript的函数作用域
Nov 12 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
JS实现的数组去除重复数据算法小结
Nov 17 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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代码(星期六,星期日总和)
2009/11/12 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php使用PDO方法详解
2014/12/27 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP反射实际应用示例
2019/04/03 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
Position属性之relative用法
2015/12/14 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python实现AdaBoost算法的示例
2020/10/03 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
网站编辑求职信
2013/10/17 职场文书
三年级数学教学反思
2014/01/31 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
一年级班主任感言
2014/03/08 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
创业计划书之美甲店
2019/09/20 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB