使用 lodash 对浮点数上的对象数组进行排序答案

【问题标题】：Using lodash to sort an array of objects on a floating point number使用 lodash 对浮点数上的对象数组进行排序
【发布时间】：2017-01-18 15:39:45
【问题描述】：

我有一个这样的 Javascript 数组：

var list = [{Name: 'X', Value: 140.000},
{Name: 'Y', Value: 200.000},
{Name: 'Z', Value: 50.000}]

（它还有更多属性，但为简洁起见省略了）。

我创建了一个函数，该函数使用传递给函数的属性名称对该列表进行排序。我已经用 lodash 轻松完成了这项工作，但是如果我对 Value 进行排序，则这些值似乎被视为字符串并且排序错误。

这是我的排序功能（到目前为止）

function sortByField(fieldName)
    {
        list = _.sortBy(list, fieldName);

        //afterwards I call reverse() if the sortDirection is descending, but I omitted this part for brevity
    }

对 Value 排序后，我得到以下数组：

var list = [{Name: 'X', Value: 140.000},
{Name: 'Y', Value: 200.000},
{Name: 'Z', Value: 50.000}]

您可以看到它将值视为字符串，即使它们是十进制数。 'Z' 对象应该是第一个。我该如何解决这个问题？

我一直在搜索 lodash 文档，但似乎找不到与此问题相关的任何内容。请问有什么帮助吗？将不胜感激。

编辑：我刚刚意识到 Value-property 是通过网页（输入控件）填充的，因此 Javascript 实际上将它作为字符串添加到数组中，这可能会导致问题。我可以以某种方式将其转换为浮点数吗？还是我必须求助于 Javascript 的内置排序功能并创建自己的比较？

【问题讨论】：

只需使用普通的内置 JavaScript .sort() 和回调即可返回两个“值”属性之间的差异。
为什么是小数点后的位置？
哦，这是千位分隔符，而不是示例中的小数点。在我国，“。”是千位分隔符 :-)
但是你需要一个数字或一个字符串并按自定义字符串值排序是错误的。

标签： javascript sorting lodash

【解决方案1】：

您发布的内容：

var list = [{Name: 'X', Value: 140.000},
   {Name: 'Y', Value: 200.000},
   {Name: 'Z', Value: 50.000}];

list = _.sortBy(list, 'Value');
console.log(list);

应该按预期工作。

http://jsbin.com/fegifibasu/edit?js,console

现在，如果由于某种原因（如您所述），Value 字段包含字符串而不是浮点数，那么您需要编写“自定义”排序函数。例如：

var list = [{Name: 'X', Value: '140.000'},
  {Name: 'Y', Value: '200.000'},
  {Name: 'Z', Value: '50.000'}];

list = _.sortBy(list, function(o) {
  return parseFloat(o.Value);
});
console.log(list);

http://jsbin.com/gagelipuza/edit?js,console

【讨论】：

以及如何按 asc desc 排序？当你需要订购时它不起作用......
在 _sortBy 之后为 DESC 添加以下内容。 list = _.reverse(list)

【解决方案2】：

您可以将Array#sort 与自定义compareFunction 一起使用，并将不需要的字符（例如'.'）替换为''，并将可能的小数分隔符',' 替换为点。

var list = [{ Name: 'X', Value: '140.000' }, { Name: 'Y', Value: '200.000' }, { Name: 'Z', Value: '50.000' }];

list.sort(function (a, b) {
    function getValue(v) {
        return parseFloat(v.replace('.', '').replace(',', '.'));
    }
    return getValue(a.Value) - getValue(b.Value);
});

console.log(list);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：