JavaScript Sort 的一个错误用法示例

前不久同事的代码中出了一个很神奇的问题，大致流程是对一个由对象组成的数组进行排序，其中属性 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，那么就把原数组的顺序记录在元素的属性上把。

赞 (0)

相关推荐

  • JavaScript Sort 的一个错误用法示例

    前不久同事的代码中出了一个很神奇的问题,大致流程是对一个由对象组成的数组进行排序,其中属性 a 用于排序,属性 b 作为一个优选条件,当 b 等于 1 的时候无论 a 值是什么,都排在开头 .这本是一个很简单的问题,问题就在于他用两次 sort 实现在这次排序,先根据 a 的属性排序,然后再根据 b 的值来排序.问题就出在第二次排序中. 我们想当然的会认为在第一次排序中,数组已经根据 a 的属性由大到小排序,在第二次中我们只要不去动原数组的顺序就行(一般在方法中写成返回0或-1),只考虑单独把

  • JavaScript事件的委托(代理)的用法示例详解

    JavaScript事件的委托(代理)的用法示例详解

    目录 简介 示例:事件委托 写法1:事件委托 写法2:每个子元素都绑定事件 示例:新增元素 写法1:事件委托 写法2:每个子元素都绑定事件 简介 说明 本文用示例介绍JavaScript中的事件(Event)的委托(代理)的用法. 事件委托简介 事件委托,也叫事件代理,是JavaScript中绑定事件的一种常用技巧.就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素,让外层元素担当事件监听的职务. 事件代理的原理是DOM元素的事件冒泡. 事件委托的优点 1.节省内存,减少事件的绑定 原

  • JavaScript 防篡改对象的用法示例

    javascript防篡改对象 这个东西吧,用到的很少,个人感觉用处不大,但是,可以作为装逼的利器,哈哈,开搞.. 1.不可扩展对象 默认情况下对象都是可以扩展的,也就是说,任何时候都可以向对象中添加属性和方法.现在使用Object.preventExtensions(object)方法可以改变这个行为,让你不能再给对象添加属性和方法.例如: var person={name : 'jack'}; Object.preventExtensions(person); person.age=13;

  • JavaScript字符串对象(string)基本用法示例

    JavaScript字符串对象(string)基本用法示例

    本文实例讲述了JavaScript字符串对象(string)基本用法.分享给大家供大家参考,具体如下: 1.获取字符串的长度: var s = "Hello world"; document.write("length:"+s.length); 2.为字符串添加各种样式,如: var txt = "Some words"; document.write("<p>Big: " + txt.big() + "

  • JavaScript日期对象(Date)基本用法示例

    JavaScript日期对象(Date)基本用法示例

    本文实例讲述了JavaScript日期对象(Date)基本用法.分享给大家供大家参考,具体如下: 1.获取当前日期: document.write("Current time: "+new Date()); 2.获取时间戳(毫秒): document.write(new Date().getTime()); 3.设置年月日(年为必选,月日为可选): var d = new Date(); d.setFullYear(2016,3,16) document.write(d); docum

  • JavaScript中forEach的错误用法汇总

    目录 前言 语法 错误用法 添加或删除原数组中的数据 修改原数组中的数据 回调函数中使用异步函数 使用return结束循环 未传入this 正确用法 总结 前言 使用过forEach的人大致有两种:普通使用,简简单单:复杂使用,总想搞出点花样来,结果一些莫名其妙的bug就出现了,解决这些bug所花费的时间都可以换一种思路实现了,能用作for循环的,又不只是forEach.没错,笔者就是后者,终究是自己“学艺不精”.于是乎,花点时间,结合自己的实际开发经验,再来好好理理forEach. 语法 fo

  • PHP自定义错误用法示例

    本文实例讲述了PHP自定义错误用法.分享给大家供大家参考,具体如下: 自定义错误就是自己可以完全控制错误以及其提示内容 设定错误由自己定义的函数来处理 set_error_handler('errName'); 设定该函数并在其中自定义错误的输入与记录,自带四个参数 errNo 错误号 errMsg 错误信息 errFile 错误文件 errLine 错误行号 function errName($errNo,$errMsg,$errFile,$errLine){ echo 'errNo:'.$e

  • MySQL中常见的八种SQL错误用法示例

    前言 MySQL在2016年仍然保持强劲的数据库流行度增长趋势.越来越多的客户将自己的应用建立在MySQL数据库之上,甚至是从Oracle迁移到MySQL上来.但也存在部分客户在使用MySQL数据库的过程中遇到一些比如响应时间慢,CPU打满等情况. 阿里云RDS专家服务团队帮助云上客户解决过很多紧急问题.现将<ApsaraDB专家诊断报告>中出现的部分常见SQL问题总结如下,供大家参考. 1.LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方. 比如对于下面简单的语句

  • JavaScript中return用法示例

    本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body

  • JavaScript日期工具类DateUtils定义与用法示例

    JavaScript日期工具类DateUtils定义与用法示例

    本文实例讲述了JavaScript日期工具类DateUtils定义与用法.分享给大家供大家参考,具体如下: DateUtils = { patterns: { PATTERN_ERA: 'G', //Era 标志符 Era strings. For example: "AD" and "BC" PATTERN_YEAR: 'y', //年 PATTERN_MONTH: 'M', //月份 PATTERN_DAY_OF_MONTH: 'd', //月份的天数 PATT

随机推荐