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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
vue 页面跳转的实现方式
Jan 12 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
关于PHP中的Class的几点个人看法
2006/10/09 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
详解Nodejs之npm&package.json
2017/06/15 NodeJs
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
python 实现批量图片识别并翻译
2020/11/02 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
综合内勤岗位职责
2014/04/14 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP