代码之家 › 专栏 › 技术社区 › Kiv Daor

当某些项具有未知值时,排序数组无法正常工作

redux-toolkit redux reactjs javascript

0

Kiv Daor · 技术社区 · 2 年前

假设我有一个对象数组

[
  {
      "name": "John", 
      "height": "172", 
      "weight": "87"
  }, 
  {
      "name": "Tom", 
      "height": "167", 
      "weight": "67"

  }, 
  {
      "name": "James", 
      "height": "156", 
      "weight": "uknown"
  }, 
  {
      "name": "Jeremy", 
      "height": "unknown", 
      "weight": "85"
  }, 
]

现在,如果我想按高度对它们进行分类,我可以这样做 persons.sort((a, b) => b.height - a.height); 同样,如果我想按重量分类,我也可以按重量分类 persons.sort((a, b) => b.weight - a.weight);

到目前为止,这一切都很好,但是有些值是未知的,如果我把这个数组保持在某种状态,并按未知值对它们进行排序,就会把它搞砸,不能正确排序。如果有更多的对象超过4个,它会排序到某个点,但一旦它碰到一个具有未知属性的对象,它就会把它搞砸,数组的其余部分就无法正确排序。我怎样才能克服这个问题?也许是做了些什么,把价值未知的物品推到了底部?

1 回复 | 直到 2 年前

1

0

Tushar Shahi 2 年前

你所要做的就是在身高/体重下降时处理具体情况 unknown 并返回适当的值

例如:

const items = [
  {
      "name": "John", 
      "height": "172", 
      "weight": "87"
  }, 
  {
      "name": "Tom", 
      "height": "167", 
      "weight": "67"

  }, 
  {
      "name": "James", 
      "height": "156", 
      "weight": "uknown"
  }, 
  {
      "name": "Jeremy", 
      "height": "unknown", 
      "weight": "85"
  }, 
    {
      "name": "Jeremy2", 
      "height": "162", 
      "weight": "85"
  }, 
    {
      "name": "Jeremy3", 
      "height": "unknown", 
      "weight": "85"
  }, 
];

items.sort((a,b) => {
  if(b.height === 'unknown' && a.height ==='unknown') return 0;
  else if(b.height === 'unknown') return -1;
  else if(a.height === 'unknown') return 1;
  else return a.height - b.height;
});

console.log(items);

比较器函数 比较(a,b) 工作原理如下:

if return value sort > 0, sort b before a.
else if return value sort < 0, sort a before b.
else if return value === 0  keep original order of a and b.

MDN Link

编辑:

如果要处理逗号分隔的字符串,首先要转换为数字:

items.sort((a,b) => {
  if(b.height === 'unknown' && a.height ==='unknown') return 0;
  else if(b.height === 'unknown') return -1;
  else if(a.height === 'unknown') return 1;
  else return parseFloat(a.height.replace(/,/g, '')) -
parseFloat(b.height.replace(/,/g, ''))
});

Source