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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
vue axios用法教程详解
Jul 23 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
从vue源码看props的用法
Jan 09 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
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
第三节 定义一个类 [3]
2006/10/09 PHP
PHP获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python生成随机mac地址的方法
2015/03/16 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python3 max()函数基础用法
2019/02/19 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
cf收人广告词大全
2014/03/14 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
高中政治教学反思
2016/02/23 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript