大于（>）运算符的Javascript无法正常工作[重复]答案

【问题标题】：Javascript greater than (>) operator not working properly [duplicate]大于（>）运算符的Javascript无法正常工作[重复]
【发布时间】：2020-06-04 14:27:02
【问题描述】：

我正在尝试制作一个可视化工具来描述某些排序算法的工作原理，类似于this link 上的视频，但只有 20 个值。我们的想法是让条形的长度为 x%，其中 x 是一个随机数，我使用网格根据它们所代表的数字来排列条形。首先，我尝试使用以下代码进行蛮力排序：

sleep(ms){
  return new Promise((resolve) => setTimeout(resolve, ms));
}
async function bruteForce() {
  let vals = [...grid.querySelectorAll(".grid-item")];

  for (let i = 0; i < vals.length; ++i) {
    for (let j = 0; j < vals.length; ++j) {
      if (i != j) {
        vals[i].classList.add("compare");
        vals[j].classList.add("compare");
        const node1val = parseInt(vals[i].getAttribute("data-value"));
        const node2val = parseInt(vals[j].getAttribute("data-value"));

        if (node2val > node1val) {
          console.log(node2val + " > " + node1val);
          const node1Class = vals[i].className;
          vals[i].className = vals[j].className;
          vals[j].className = node1Class;
        } else {
          console.log(node2val + " < " + node1val);
        }

        await sleep(300);
        vals[i].classList.remove("compare");
        vals[j].classList.remove("compare");
      }
    }
  }
}

问题是这些值没有正确排序。值 5、87、56、45、20 被排序为 20、45、56、87、5。

以下是控制台输出：

我突出显示了错误的。为什么解释器认为 5 大于 20？我该如何纠正这个问题？

更新：修复了字符串比较。仍然得到错误的值顺序。但是，控制台输出现在是正确的。 JSfiddle demo

【问题讨论】：

你在比较字符串
按字母顺序排序是正确的。虽然你为什么不使用sort()？
@MikeBrockington 将 sort() 处理 DOM 元素吗？
内置的排序适用于任何事情——您只需要在处理对象时提供一个小/简单的比较功能。
@MikeBrockington 尝试使用排序。元素确实得到排序。但是显示的元素不会改变，因为它们的顺序是由网格通过类名 g-i-1、g-i-2、g-i-3 等来指定的。

标签： javascript operators css-grid

【解决方案1】：

我猜你是比较 String 和 String。

45 < 5 是假的，但是"45" < "5" 是真的

尝试使用parseInt()函数将字符串转换为int。

【讨论】：

【解决方案2】：

属性值为String，您应该将它们转换为number

const node1val = parseInt(vals[i].getAttribute("data-value"));
const node2val =  parseInt(vals[j].getAttribute("data-value"));

【讨论】：