理解sort（）compareFunction [英] Understanding sort() compareFunction

问题描述

我正在使用的电子商务平台缺乏重新排序产品属性字段选项的功能。它真的很糟糕，因为要插入一个新选项，你几乎必须删除所有现有选项并重新开始。我试图做客户端而不是。这是我正在使用的（这是鞋子尺码）：

I'm working with an ecommerce platform that lacks the ability to reorder the options of our product attribute fields. It really sucks because to insert a new option you pretty much have to delete all of the existing ones and start over. I'm trying to do it client-side instead. Here's what I'm working with (this one's for a shoe size):

• 9 EE


• 9 1/2 EE


• 10 EE


• 10 1/2 EE


• 11 EE


• 11 1/2 EE


• 9 EEEE


• 9 1/2 D


• 9 1/2 EEEE


• 10 EEEE


• 10 1/2 EEEE


• 11 EEEE


• 9 D


• 11 1/2 EEEE

• 9 EE
• 9 1/2 EE
• 10 EE
• 10 1/2 EE
• 11 EE
• 11 1/2 EE
• 9 EEEE
• 9 1/2 D
• 9 1/2 EEEE
• 10 EEEE
• 10 1/2 EEEE
• 11 EEEE
• 9 D
• 11 1/2 EEEE

这些实际上是表单中某些< option> 的文本。值的格式为 XYZ 其中：

These are actually the text of some <option>s in a form. The format of the values is X Y Z where:

• X 是一个整数


• Y 是字符串1/2，可能不存在


• Z 是一个字母代码，可以是D，E，EEE或EEEE，以及可能不存在

• X is a whole number
• Y is the string "1/2" and may not be present
• Z is a letter code which is either "D", "E", "EEE", or "EEEE", and may not be present

以上所需的顺序是：

• 9 D


• 9 1/2 D


• 9 EE


• 9 1/2 EE


• 9 EEEE


• 9 1/2 EEEE


• 10 EE


• 10 1/2 EE


• 10 EEEE


• 10 1/2 EEEE


• 11 EE


• 11 1/2 EE


• 11 EEEE


• 11 1/2 EEEE

• 9 D
• 9 1/2 D
• 9 EE
• 9 1/2 EE
• 9 EEEE
• 9 1/2 EEEE
• 10 EE
• 10 1/2 EE
• 10 EEEE
• 10 1/2 EEEE
• 11 EE
• 11 1/2 EE
• 11 EEEE
• 11 1/2 EEEE

我已经了解了一下javascript的 sort（）函数但是还没能完全理解你可以传递给它的比较函数是如何工作的。到目前为止我已经得到了这个：

I've learned a little bit about javascript's sort() function but haven't been able to fully comprehend how the comparison function that you can pass to it works. I've got this so far:

<select>
    <option>9 EE</option>
    <option>9 1/2 EE</option>
    <option>10 EE</option>
    <option>10 1/2 EE</option>
    <option>11 EE</option>
    <option>11 1/2 EE</option>
    <option>9 EEEE</option>
    <option>9 1/2 D</option>
    <option>9 1/2 EEEE</option>
    <option>10 EEEE</option>
    <option>10 1/2 EEEE</option>
    <option>11 EEEE</option>
    <option>9 D</option>
    <option>11 1/2 EEEE</option>
</select>

我从这个答案的代码开始： https://stackoverflow.com/a/667198/398242

I started with the code taken from this answer: https://stackoverflow.com/a/667198/398242

$("select").html($("option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
}));

对这样的项目进行排序（即使是第一个标准也不起作用）：

Which sorts the items like this (doesn't work for even the first criteria):

• 10 1/2 EE
• 10 1/2 EEEE
• 10 EE
• 10 EEEE
• 11 1/2 EE
• 11 1/2 EEEE
• 11 EE
• 11 EEEE
• 9 1/2 D
• 9 1/2 EE
• 9 1/2 EEEE
• 9 D
• 9 EE
• 9 EEEE

• 10 1/2 EE
• 10 1/2 EEEE
• 10 EE
• 10 EEEE
• 11 1/2 EE
• 11 1/2 EEEE
• 11 EE
• 11 EEEE
• 9 1/2 D
• 9 1/2 EE
• 9 1/2 EEEE
• 9 D
• 9 EE
• 9 EEEE

我在javascript '11'>中看到了这一点'9'返回 false ，这对我没有任何意义。

I see that in javascript '11' > '9' returns false, which in no way makes sense to me.

MDN描述了比较函数参数因此，我得到它：

function compare(a, b) {
  if (a is less than b by some ordering criterion)
     return -1;
  if (a is greater than b by the ordering criterion)
     return 1;
  // a must be equal to b
  return 0;
}

...但我还没有弄清楚如何适应这个符合我的要求。我尝试了一些东西，但我觉得我在黑暗中拍摄。我试图表明我花了一些时间来尝试理解这个问题。我有兴趣了解更多，但现在我只想解决这个问题。

...but I haven't got a clue how to adapt this to fit my requirements. I've tried a few things but I just feel like I'm shooting in the dark. I've tried to show that I've taken some time to attempt an understanding of this problem. I'm interested in learning more, but for now I'd just like to get this issue solved.

http://jsfiddle.net/DnwJ6/ 任何线索？

推荐答案

检查一下：

$("select").html($("option").sort(function (a, b) {
    var regex = /(\d+)((?: 1\/2)? )([DE]+)/;
    var abreakdown = a.text.match(regex), bbreakdown = b.text.match(regex);
    if (parseInt(abreakdown[1]) === parseInt(bbreakdown[1])) {
        if (abreakdown[3] === bbreakdown[3]) {
            return (abreakdown[2] === bbreakdown[2] ? 0 : (abreakdown[2] < bbreakdown[2] ? -1 : 1));    
        } else {
            return abreakdown[3] < bbreakdown[3] ? -1 : 1;
        }
    } else { return parseInt(abreakdown[1]) - parseInt(bbreakdown[1]); }
}));

它使用正则表达式来分解碎片，然后根据每个组件进行比较。

It uses a regex to break the pieces down and then do comparison based on each component.

演示小提琴。

这篇关于理解sort（）compareFunction的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！