理解sort()compareFunction

Question

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

• 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>形式的文本.值的格式是X Y Z:

• X 是一个整数
• Y 是字符串"1/2",可能不存在
• Z 是字母代码,可以是"D","E","EEE"或"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()函数的知识但是还没有完全理解你可以传递给它的比较函数是如何工作的.到目前为止我有这个:

<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

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

对这样的项目进行排序(即使是第一个标准也不起作用):

• 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,这对我来说没有任何意义.

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;
}

...但我还没有弄清楚如何根据我的要求进行调整.我尝试了一些东西,但我觉得我在黑暗中拍摄.我试图表明我花了一些时间来尝试理解这个问题.我有兴趣了解更多,但是现在我只想解决这个问题.

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

Answer 1

看看这个：

$("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]); }
}));

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

演示小提琴。