在值上合并两个不同长度的数组对象

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 执行此操作的方法。一般来说，我觉得这两个库中的任何一个都可以使这种类型的任务变得超级简单，但我似乎永远无法弄清楚到底是如何做到的。
• 尝试为此找到正确的搜索词非常困难...建议？

感谢反馈/见解。

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() 是一种连接两个数组且不会产生副作用的廉价方法，sortByAll() 可让您按多个属性名称进行排序。