根据值合并两个不同长度的数组对象

Question

我需要一些帮助来完成一项相当直接但具有挑战性（对我来说 :) 的编程任务。

数组对象一长一短两个：

var arrayShort = [
  {
    id: 'A',
    name: 'first'
  },{
    id: 'B',
    name: 'second'
  },{
    id: 'C',
    name: 'third'
  }
]

var arrayLong = [
  {
    id: 'A',
    name: 'firstSub1'
  },{
    id: 'A',
    name: 'firstSub2'
  },{
    id: 'A',
    name: 'firstSub3'
  },{
    id: 'B',
    name: 'secondSub1'
  },{
    id: 'B',
    name: 'secondSub2'
  },{
    id: 'B',
    name: 'secondSub3'
  },{
    id: 'C',
    name: 'thirdSub1'
  },{
    id: 'C',
    name: 'thirdSub2'
  },{
    id: 'C',
    name: 'thirdSub3'
  }
]

我如何根据共享 ID 将它们合并在一起以获得以下内容：

var arrayCombined = [
  {
    id: 'A',
    name: 'first'
  },{
    id: 'A',
    name: 'firstSub1'
  },{
    id: 'A',
    name: 'firstSub2'
  },{
    id: 'A',
    name: 'firstSub3'
  },{
    id: 'B',
    name: 'second'
  },{
    id: 'B',
    name: 'secondSub1'
  },{
    id: 'B',
    name: 'secondSub2'
  },{
    id: 'B',
    name: 'secondSub3'
  },{
    id: 'C',
    name: 'third'
  },{
    id: 'C',
    name: 'thirdSub1'
  },{
    id: 'C',
    name: 'thirdSub2'
  },{
    id: 'C',
    name: 'thirdSub3'
  },
]

重要

顺序很重要。

我试过的

for (var i = 0; i < arrayShort.length; i++) {
  var itemShort = arrayShort[i]
  console.log(itemShort)
  for (var j = 0; j < arrayLong.length; j++) {
        var itemLong = arrayLong[j]
    if (itemLong.id === itemShort.id) {
      console.log(itemLong)
      arrayShort.splice(j + 1, 0, arrayLong)
    }
  }
}


var arrayCombined = arrayShort
console.log(arrayCombined)

这会导致无限循环，但我不确定原因。一般来说，我知道嵌套循环和条件语句是坏消息。

有什么更好的方法来解决这个问题（在思想上，使用代码等）？

Here's a Codepen,打开开发工具看看

备注：

Vanilla Javascript 解决方案是首选，但最好能看到使用 Lodash 或 Underscores 执行此操作的方法。一般来说，我觉得这两个库中的任何一个都可以使这类任务变得非常简单，但我似乎永远无法理解具体是如何做到的。
为此寻找合适的搜索词出奇地困难...有建议吗？

感谢feedback/insights。

Answer 1

concat 和 sort 是你的朋友

var arrayCombined = (arrayShort.concat(arrayLong).sort(function(a,b) {


            return (a.id > b.id) ?  1 : 
                  ((a.id < b.id) ? -1 : 0);

})).sort(function(a,b) {

            return (a.name > b.name) ?  1 : 
                  ((a.name < b.name) ? -1 : 0);

});;

console.log(arrayCombined);

这是输出

[ { id: 'A', name: 'first' },
  { id: 'A', name: 'firstSub1' },
  { id: 'A', name: 'firstSub2' },
  { id: 'A', name: 'firstSub3' },
  { id: 'B', name: 'second' },
  { id: 'B', name: 'secondSub1' },
  { id: 'B', name: 'secondSub2' },
  { id: 'B', name: 'secondSub3' },
  { id: 'C', name: 'third' },
  { id: 'C', name: 'thirdSub1' },
  { id: 'C', name: 'thirdSub2' },
  { id: 'C', name: 'thirdSub3' } ]

Answer 2

使用 lodash，你可以做这样的事情：

var arrayShort = [
    { id: 'A', name: 'first' },
    { id: 'B', name: 'second' },
    { id: 'C', name: 'third' }
];

var arrayLong = [
    { id: 'A', name: 'firstSub1' },
    { id: 'A', name: 'firstSub2' },
    { id: 'A', name: 'firstSub3' },
    { id: 'B', name: 'secondSub1' },
    { id: 'B', name: 'secondSub2' },
    { id: 'B', name: 'secondSub3' },
    { id: 'C', name: 'thirdSub1' },
    { id: 'C', name: 'thirdSub2' },
    { id: 'C', name: 'thirdSub3' }
];

_(arrayShort)
    .union(arrayLong)
    .sortByAll('id', 'name')
    .value()
// →
// [
//   { id: 'A', name: 'first' },
//   { id: 'A', name: 'firstSub1' },
//   { id: 'A', name: 'firstSub2' },
//   { id: 'A', name: 'firstSub3' },
//   { id: 'B', name: 'second' },
//   { id: 'B', name: 'secondSub1' },
//   { id: 'B', name: 'secondSub2' },
//   { id: 'B', name: 'secondSub3' },
//   { id: 'C', name: 'third' },
//   { id: 'C', name: 'thirdSub1' },
//   { id: 'C', name: 'thirdSub2' },
//   { id: 'C', name: 'thirdSub3' }
// ]

其中 union() is a cheap way to concatenate two arrays without side-effects in either one, and sortByAll() 允许您按多个属性名称排序。

根据值合并两个不同长度的数组对象

Merging two array objects of different lengths on value

javascript

arrays

json

loops

lodash

重要

我试过的