Question

注意 : < / strong > 我不使用jQuery 或其他图书馆, 是因为我想了解我所写的东西和为什么它有效(或没有), 所以请不要用图书馆或图书馆插件回答这个问题。我不反对图书馆, 但这个项目对我的编程目标有害。

'他们说' '/'说 '/'

在http://meyerweb.com/eric/cs/cls/colors/ 上,我用我自己写的 DOM 函数添加了几列排序。问题是,虽然它对于,比如,简单的字母化字符串来说效果很好,但当我试图用多个数字术语排序时,浏览器的结果是不一致的——实际上,当我试图用两个子类来排序时。

例如,如果您在 OS X 的 Safari 或 Firefox 中点击“ 十进制 RGB ” 几次, 就会得到我想要的结果。在 Chrome 或 Opera ( 再说一遍, OS X ) 中也这样做, 结果就会大相径庭。是的, Safari 和 Chrome 在此有差异。

以下是JS I在使用RGB的片段:

sorter.sort(function(a,b){
    return a.blue - b.blue;
});
sorter.sort(function(a,b){
    return a.green - b.green;
});
sorter.sort(function(a,b){
    return a.red - b.red;
});

( sorter 是我要排序的阵列。 )

类似的做法是在另一个StackOverflow问题“。然而,我最初尝试的四种浏览器中的两种,其结果不是我预期的结果。

我理解这与阵列种类“不稳定”有关 — — 这里没有争论! — — 但我不知道的是如何以一致、可靠的方式克服它。我确实需要一些帮助来理解问题和看到解决方案,或者至少对解决方案作一个通用描述。

我意识到或许有六百万种方法可以优化联署材料的其余部分(是的,我使用了一个全球 ) 。我仍然是联署材料的新手,并试图通过实践纠正这一点。现在,它的排列方式让我困惑不清,我可以用剧本的剧本来帮助我,然后再去别处清理代码。多谢了!

<强> UPDATE

除了下面的深刻解释和建议之外,我还有一条关于更紧凑的解决办法的线:

function rgbSort(a,b) {
    return (a.red - b.red || a.green - b.green || a.blue - b.blue);
}

虽然我还不太明白, 但我认为我开始领会它的轮廓,

Answer 1

OK 。因此, 正如你所发现的那样, 您的问题是, 默认 JavaScript 类的默认 JavaScript 不被保证为 < em> 稳定 < / em > 。具体地说, 我认为, 在你的脑中, 它是这样工作的: 我将按蓝色排序, 然后在我按绿色排序时, 排序器会将我阵列中的条目上下移动, 但按蓝色排序。可悲的是, 宇宙没有这么方便地排列; 内置的 JavaS 类可以做它喜欢的排序。特别是, 它允许将阵列中的内容扔进一个大桶里, 然后按照你要求的排序把它们拉出来, < 完全忽略 < / em > 之前的排列方式, 它看上去至少有些浏览器可以做准确的。

首先,您仍然可以在三个不同的电话中做类似的事情, 但确保这些电话能做类似的事情。这意味着在按照蓝色进行分类后, 您可以用绿色进行分类, 并且会给你一个按照绿色和蓝色顺序排序的阵列( 比如, 您正在寻找的东西 ) 。我的可排序图书馆通过实施“ 沙克类” 或“ 鸡尾酒类” 方法( http:// en.wikipedia. org/ wiki/ Cocktail_ sort) 来做这个。基本上, 这种排序方式在列表中进行许多排序, 并上下移动项目。 ( 特别是, 它所做的是把所有列表项目都扔进桶里, 并按顺序把它们拉出来。) 维基百科文章上有一个漂亮的小图。这意味着“ 子索尔茨” 继续排序 -- 也就是说, 排序是稳定的, 它将给您带来你想要的东西。

然而, 对于此使用, 我将不担心在三个不同的调用中做这种排序, 并确保它们稳定下来; 相反, 我将做所有排序。我们可以把一个 rgb 颜色指标( 255, 192, 80) 想象成在一个奇怪的基数中是一个大数字 : 要避免过多的数学, 想象它在基数 1000 中( 如果该词没有意义, 忽略它; 仅仅将整个 rgb 属性转换成一个包含全部的数, 有点像 CSS 计算在级联中的位次数一样。所以这个数字可以被想象成 255, 192 080 。如果您对每一行都计算这个数字, 然后按这个数字排序, 它就全部工作了, 你只需要做一次: 这样, 而不是做三种类型, 您可以做一个 : < code>sorter. sort( a, b) { return (a.red *1000 + a. grearm * 100+ a. b. bluue) - b. b. b. b. b. b. b. b. b. b. b.

从技术上讲,这是略为无效的, 因为每次调用您的排序函数时, 您都必须计算“ 基准1000 数字 ” 的“ 基准 1000 数字 ”, 而每次调用您排序的列表。因此, 创建一个看起来像 < code> [255- 2080, < table 行 1>], [255255, & lt; table 行 2>], [2000000, & lt; table 3> ] , 将每个行的基数排序( 函数如 < code> mylist. sort( 函数), 将其全部放入列表, 排序, 然后通过列表( 函数如 < codection > a. sort( a, b) 返回一个 [0]- b; 也有可能 < lt; tab> 。 [255255255, & ; & lt; ta 2;], [srb], [trex], [s] 。然后走过该列表的顺序。

Answer 2

我会以不同的方式解决这个问题。你似乎正在试图通过从标记中提取数据来重建所有数据,这可能会是一项危险的任务;更直接的方法是用程序从一开始就能够理解的格式来代表所有您想要生成到页面的数据,然后简单地在页面上先重新生成标记,然后在随后的每一种类型上重新生成标记。

例如:

var colorsData = [
  {
    keyword:  mediumspringgreen ,
    decimalrgb: {
      r: 0,
      g: 250,
      b: 154
    },
    percentrgb: {
      r: 0,
      g: 98,
      b: 60.4
    },
    hsl: {
      h: 157,
      s: 100,
      l: 49
    }
    hex:  00FA9A ,
    shorthex: undefined
  },
  {
    //next color...
  }
];

这样,你就可以在这个阵列上以任何你喜欢的方式运行, 并且你不想从标记中提取数据并且分割数据, 并重新分配数据等等。

但实际上,似乎您可能重新挂起排序函数。运行多种函数之后又运行多种函数将产生意想不到的结果; 您必须运行一种单一的排序函数, 以比较上一列被发现相等时的下一列。 RGB 类型可能看起来像 :

var decimalRgbForwards = function(a,b) {
  var a = a.decimalrgb,
      b = b.decimalrgb;
  if ( a.r === b.r ) {
    if ( a.g === b.g ) {
      return a.b - b.b;
    } else {
      return a.g - b.g;
    }
  } else {
    return a.r - b.r;
  }
};

所以两种与 R 和 g 值相匹配的颜色将会回到 B 值上的平等, 这正是你正在寻找的。

然后,你就可以应用这种方式:

colorsData.sort(decimalRgbForwards);

................ 终于通过那个阵列循环到那个阵列.

希望有帮助先生

友情链接