Javascript 排序“不稳定” - 我该如何解决这个问题?

2023-11-23

根据MDN spec,Javascript sort() 函数“不稳定”(不维护相同元素的输入顺序)。

讽刺的是,Firefox 目前似乎还没有实现这一点 - 但 Chrome 似乎实现了。

这给我留下了一些问题。我有一组元素要排序 - 一旦排序,我想将它们标记为“已排序”,以便后续的排序尝试不会浪费大量时间发现它们已经排序(如果有任何变化,我可以取消标记它们) 。

问题是,我的解决方案是在比较函数中返回“0”,但这意味着我只是为每个元素返回“等价”,并且它们可以(并且将会)被洗牌。

这说明了问题(在这里摆弄)

<head>
    <script>
        var firsttime=true;
        function test() {
            debugger;
            var elements = document.getElementById('test').children;
            var sortMe = [];
            for (var i=0; i<elements.length; i++)
                sortMe.push(elements[i]);
            sortMe.sort(function(a, b) {
                if (firsttime) {
                    if (a.innerText < b.innerText) return -1;
                    else if (a.innerText > b.innerText) return 1;
                    else return 0;
                } else {
                    return 0;
                }
            });
            var parent = document.getElementById('test');
            parent.innerHTML = "";
            for(var i = 0, l = sortMe.length; i < l; i++) {
                parent.appendChild(sortMe[i]);
            }
            firsttime=false;
        }
    </script>
</head>
<body>
<div id=test>
    <div>B</div>
    <div>D</div>
    <div>A</div>
    <div>C</div>
    <div>E</div>
    <div>B</div>
    <div>D</div>
    <div>A</div>
    <div>C</div>
    <div>E</div>
    <div>B</div>
    <div>D</div>
    <div>A</div>
    <div>C</div>
    <div>E</div>
</div>
<input type=button onclick=test()>
</body>

在 Chrome 上运行,您将看到集合的中间元素在后续排序中移动 - 这在 Mozilla 上不会发生(至少不是我这里的版本)。

关于如何解决这个问题的任何想法,而不必每次都求助?实际的排序要复杂得多,并且有数百个元素需要检查,因此需要花费大量时间,我不想不必要地重复?

编辑添加:我什至尝试使用数组索引强制按顺序对数组进行排序,但即使这样在 Chrome 上也不起作用。 Chrome 似乎使用了一个变体快速排序它交换数组中的元素“只是为了它的地狱”

似乎我别无选择,只能每次都采用,完全跳过排序或实现我自己的算法......


这是一个工作稳定排序的示例。它为原始项目索引添加了一个额外参数,如果项目在其他方面“相等”,则使用该参数。该代码应该可以在使用的任何浏览器中运行。

请注意,这只是一个示例,应进行修改以适合您的特定情况。

<script type="text/javascript">

// Return the text content of an element depending on
// whether the textContent or innerText property is supported
function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  } else if (typeof el.innerText == 'string') {
    return el.innerText;
  } else {
    // gather text nodes and concatenate values
    // trimmed as almost never used now
  }
}


function sortEm(){

  // Get the elements to sort
  var container = document.getElementById('container'); 
  var divs = container.getElementsByTagName('div');
  var els = [];

  // Convert collection to an array, add the current index for the element
  // as a data- property
  for (var i=0, iLen=divs.length; i<iLen; i++) {
    divs[i].setAttribute('data-sortIndex', i);
    els[i] = divs[i];
  }

  // Sort the array. If the textContent is equal, use
  // the original index
  els.sort(function(a, b) {
    var aText = getText(a);
    var bText = getText(b);

    if (aText < bText) return -1;
    if (aText > bText) return 1;
    return a.getAttribute('data-SortIndex') - b.getAttribute('data-sortIndex');
  })

  // Modify the content
  for (var j=0, jLen=els.length; j<jLen; j++) {
    container.appendChild(els[j]);
  }
}

</script>

<div id="container">
  <div style="background-color: red;">0</div>
  <div style="background-color: red;">2</div>
  <div style="background-color: blue;">0</div>
</div>
<button onclick="sortEm()">Sort divs</button>

额外的参数作为属性添加,并且可以在将元素添加回容器时删除以保持干净。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 排序“不稳定” - 我该如何解决这个问题? 的相关文章

  • 在 javascript/jquery 中将光标更改为等待

    当调用函数时 如何让光标更改为此加载图标以及如何将其更改回 javascript jquery 中的普通光标 在你的 jQuery 中使用 body css cursor progress 然后又恢复正常 body css cursor d
  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init
  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for
  • Web 串行 API - 未捕获(承诺中)DOMException:无法打开串行端口/所需成员 baudRate 未定义

    下面的代码可以在我的 Xubuntu 机器上运行 但现在我在 Kubuntu 上 它不再工作了 它不会打开端口 Arduino IDE 工作正常 可以向开发板写入代码 并且我可以在 Chrome 中选择设备 Arduino Uno 但当我尝
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • Jquery/Javascript 上传和下载文件,无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 如何从图像输入中获取 xy 坐标?

    我有一个输入设置为图像类型

随机推荐

  • 如何使用 HTML 检测访问者的 IP 地址? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 如何使用 HTML 检测我网站的访问者 IP 地址 我有一个 contactform html 和一个 formsent html 当 formsent html 将联系信息发送
  • 在单独的线程中启动烧瓶应用程序

    我目前正在开发一个 Python 应用程序 我想在其中查看实时统计数据 我想用Flask以便于使用和理解 问题是我的 Flask 服务器应该在我的 Python 应用程序的最开始处启动并在最后停止 它应该看起来像这样 def main My
  • AsyncStorage 是否跨应用程序共享?

    我的问题源自文档 https facebook github io react native docs asyncstorage html clear AsyncStorage clear gt 擦除所有客户端 库等的所有 AsyncSto
  • 计算两个日期之间的营业时间

    如何计算两个日期之间的营业时间 例如我们有两个日期 2010年1月1日 15 00 和 2010年1月4日 12 00 我们的工作时间是工作日 09 00 至 17 00 如何用sql计算工作时间 Baran 的答案针对 SQL 2005
  • 将 LINQ to SQL 与 Oracle 结合使用[关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我知道 linq to sql 实际上是 LINQ to SQL Server 我还读到 人们可以构建自己的 LINQ 提供程序 以便连接到其他数据库系统 如 oracle 或
  • Perl Parallel::ForkManager 与 DBI 数据库处理程序

    我对并行执行多个数据库操作感兴趣 我已经使用过 Perl Parallel ForkManager 但尚未将其用于任何数据库 我读过数据库连接是没有得到很好的支持有了这个 有人对此有经验吗 作为一个例子 我可能会生成一个系统调用 它执行 D
  • Traefik Dashboard:Ingress 和 IngressRoute,它们可以共存吗?

    最近我正在将一个项目迁移到 Kubernetes 并使用 Traefik 作为入口控制器 对于 Traefik 我使用 Traefik Ku bernetes Ingress 提供程序进行路由 当我尝试添加 Traefik 仪表板时 我发现
  • 多个键范围作为 CouchDB 视图的参数

    根本问题 假设我的文档有 类别 and 时间戳 如果我想要所有文件 foo 时间戳在过去两个小时内的类别 很简单 function doc emit doc category doc timestamp null 然后查询为 GET ser
  • GWT 服务异常日志记录的最佳实践

    我决定将日志系统添加到我的 gwt 服务层 首先 我想记录从该层引发的所有异常 我有一个类似于Spring的ServletDispatcher的对象 它调用其他服务 我以为我可以在那里添加日志记录 但我意识到 GWT 服务将已检查的异常包装
  • CSS边距恐怖;边距在父元素外部添加空间[重复]

    这个问题在这里已经有答案了 我的 CSS 边距没有按照我想要或期望的方式运行 我似乎我的标题 margin top 影响了它周围的 div 标签 This is what I want and expect but this is what
  • 更新 matplotlib 中的行

    我有一个包含多个数据集的图表 随着数据的更新 我需要不断地重新绘制这些线 每条线都是单独的 如何重复删除并重新建立它 最好不必每次都删除整个图表并重新绘制其上的所有线条 usr bin env python import time from
  • 我可以使用 jquery 确定设备处于纵向还是横向模式吗?

    我想有条件地改变用户在我要创建的照片库网站上看到的内容 具体取决于用于查看该网站的设备是否处于纵向 垂直与横向 水平模式 方向 这可能吗 Try the orientationchange事件处理程序 如下所示 window bind or
  • 从 MySQL 中的字段中选择最常见的值

    我有一个包含一百万行的表 如何从字段中选择最常见的 表中出现最多的值 值 您需要按感兴趣的列进行分组 并为每个值选择该值本身及其出现的行数 然后就是排序 将最常见的值放在第一位 并将结果限制为一行的问题 以查询形式 SELECT colum
  • 如何更改 GGally::ggpairs 的调色板?

    这与中的问题相同R 和 ggpairs 中用户定义的调色板 or 有没有办法使用 ggplot 更改 GGally ggpairs 的调色板 只是那里的解决方案不再有效 我也想改变调色板 但是有没有办法使用 ggplot 更改 GGally
  • Python:确定序列中的任何项目是否等于任何其他项目

    我想比较多个对象并返回True仅当所有对象之间不相等时 我尝试使用下面的代码 但它不起作用 如果 obj1 和 obj3 相等且 obj2 和 obj3 不相等 则结果为True obj1 obj2 obj3 我有超过 3 个对象需要比较
  • Centos 6.4 - 无法从共享对象映射段:权限被拒绝

    您好 我正在尝试安装 Phusion Passenger 安装成功 但执行时出现以下错误service httpd start Starting httpd httpd Syntax error on line 221 of etc htt
  • 具有多个参数的 MVC4 Web API Rest 接口

    我有一个名为 LoginController 的控制器 其 Get 方法的签名为 public string Get string Key string Code string UserID string Password 我希望能够通过类
  • Github Actions 有模板吗

    由于我的 Github Actions 中有重复的步骤 我想创建一个模板 让我们举个例子 name ci on push jobs build and test strategy matrix os ubuntu latest runs o
  • 如何多次使用相同的参数?

    我知道关于sprintf 但是如何多次使用相同的参数呢 如果我使用以下代码 则会收到有关使用少量参数的错误 sprintf blabla s 11111 s test 我想更换 s with test twice Use the 编号占位符
  • Javascript 排序“不稳定” - 我该如何解决这个问题?

    根据MDN spec Javascript sort 函数 不稳定 不维护相同元素的输入顺序 讽刺的是 Firefox 目前似乎还没有实现这一点 但 Chrome 似乎实现了 这给我留下了一些问题 我有一组元素要排序 一旦排序 我想将它们标