【问题标题】:Sorting array of objects by array of strings [duplicate]按字符串数组对对象数组进行排序[重复]
【发布时间】:2019-03-14 12:43:57
【问题描述】:

所以我有一个类似于下面的对象数组:

var objs = [
  { key: 'address', value: '1234 street' },
  { key: 'nameAndTitle', value: 'John Smith, CEO' },
  { key: 'contactEmail', value: 'johnsmith@gmail.com' },
  { key: 'contactPhone', value: '1234567890' },
  { key: 'localPhone', value: '1234567890' },
  { key: 'status', value: 'open' },
]

我希望它与我拥有的另一个字符串数组的顺序相同,看起来像这样。

var keys = [
  'nameAndTitle',
  'contactPhone',
  'contactEmail',
  'address',
]

我想订购objs 数组以匹配keys 数组的顺序。如果keys 数组中不存在该对象,则应将其放在底部。谁能帮我解决这个问题?

【问题讨论】:

  • 我没有看到尝试。您是要我们为您编码吗?

标签: javascript arrays angularjs


【解决方案1】:

您可以获取索引并按其增量排序。

var objs = [{ key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: 'johnsmith@gmail.com' }, { key: 'contactPhone', value: '1234567890' }],
    keys = ['nameAndTitle', 'contactPhone', 'contactEmail', 'address'];

objs.sort((a, b) => keys.indexOf(a.key) - keys.indexOf(b.key));

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

为了完全控制顺序,您可以使用具有所需顺序值的对象,并使用值小于所有其他值的默认属性将未知键排序到顶部或值大于所有其他值到数组的底部。

这种方法也适用于花哨的排序方案,如果需要,未知项目会排序到中间。

var objs = [{ key: 'localPhone', value: '1234567890' }, { key: 'status', value: 'open' }, { key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: 'johnsmith@gmail.com' }, { key: 'contactPhone', value: '1234567890' }],
    order = { nameAndTitle: 1, contactPhone: 2, contactEmail: 3, address: 4, default: Infinity };

objs.sort(({ key: a }, { key: b }) => (order[a] || order.default) - (order[b] || order.default));

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

ES5

var objs = [{ key: 'localPhone', value: '1234567890' }, { key: 'status', value: 'open' }, { key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: 'johnsmith@gmail.com' }, { key: 'contactPhone', value: '1234567890' }],
    order = { nameAndTitle: 1, contactPhone: 2, contactEmail: 3, address: 4, default: Infinity };

objs.sort(function (a, b) {
   return (order[a.key] || order.default) - (order[b.key] || order.default);
});

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

【讨论】:

  • 如果我要向 objs 数组中添加一些不在 keys 数组中的对象,是否需要任何额外的步骤才能让匹配的对象和不在键数组显示在底部 - 为了清楚起见,我已经修改了问题@Nina Scholz
  • 我使用的是旧版本的 angularjs,所以我无法使用 => 将其替换为 function() {} 似乎使其无法正确排序。 @Nina Scholz
  • 可能你漏掉了key或者return语句。请参阅编辑。
【解决方案2】:

您可以创建一个以正确顺序推送对象的新数组这不会修改您的原始数组

如果你不介意修改原始数组,你可以调用 sort 函数来检查 keys 数组中的键位置 (我相信你会得到一些帮助的答案你用这些方法)

编辑 @Nina Scholz 做得很快 ^^

const objs = [{
    key: 'address',
    value: '1234 street'
  },
  {
    key: 'nameAndTitle',
    value: 'John Smith, CEO'
  },
  {
    key: 'contactEmail',
    value: 'johnsmith@gmail.com'
  },
  {
    key: 'contactPhone',
    value: '1234567890'
  },
];

const keys = [
  'nameAndTitle',
  'contactPhone',
  'contactEmail',
  'address',
];

const array = keys.reduce((tmp, x) => {
  const item = objs.find(y => y.key === x);

  if (item) {
    tmp.push(item);
  }

  return tmp;
}, []);

console.log(array);

【讨论】:

    【解决方案3】:

    如果可以对数组进行变异,可以使用sort函数如下:

    var objs = [{
        key: 'address',
        value: '1234 street'
      },
      {
        key: 'nameAndTitle',
        value: 'John Smith, CEO'
      },
      {
        key: 'contactEmail',
        value: 'johnsmith@gmail.com'
      },
      {
        key: 'contactPhone',
        value: '1234567890'
      }
    ]
    
    var keys = [
      'nameAndTitle',
      'contactPhone',
      'contactEmail',
      'address',
    ]
    
    objs.sort(function(a, b) {
      return keys.indexOf(a.key) - keys.indexOf(b.key);
    });
    
    console.log(objs)

    【讨论】:

      【解决方案4】:

      你可以这样做:

      遍历字符串数组。将值 (nameAndTitle) 与 obj 数组的同一索引的值进行比较。如果不匹配,请在 obj-array 中的 key-tag 中搜索该字符串并将其移动到正确的索引。我就是这样做的

      【讨论】:

        猜你喜欢
        • 2019-11-24
        • 2018-02-06
        • 1970-01-01
        • 2014-07-10
        • 2017-04-27
        • 2017-07-25
        • 2018-11-20
        • 2021-05-14
        • 2015-03-16
        相关资源
        最近更新 更多