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插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
区分vue-router的hash和history模式
Oct 03 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使用MySQL保存session会话的方法
2015/06/26 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
深入理解python中的闭包和装饰器
2016/06/12 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python zip函数打包元素实例解析
2019/12/11 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
linux面试题参考答案(2)
2015/12/06 面试题
教师绩效工资方案
2014/02/01 职场文书
后备干部考察材料
2014/02/12 职场文书
团支部建设方案
2014/05/02 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
市场督导岗位职责
2015/04/10 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
如何理解及使用Python闭包
2021/06/01 Python
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers