How to "recalculate" array after splicing in a loop?-CodePudding

Given the code below, how can I have item name "C" appear in the 3rd position correctly?

const foo = [
  {
    name: 'a',
  },
  {
    name: 'b'
  }
]

const bar = [
  {
    name: 'c',
    position: [1, 3]
  },
  {
    name: 'd',
    position: [2]
  }
]

bar.forEach((item) => {
  item.position.forEach((pos) => {
      foo.splice(pos - 1, 0, item);
  });
})

console.log(foo);

Output

[
  { name: 'c', position: [ 1, 3 ] },
  { name: 'd', position: [ 2 ] },
  { name: 'a' },
  { name: 'c', position: [ 1, 3 ] },
  { name: 'b' }
]

Desired output

[
  { name: 'c', position: [ 1, 3 ] },
  { name: 'd', position: [ 2 ] },
  { name: 'c', position: [ 1, 3 ] },
  { name: 'a' },
  { name: 'b' }
]

CodePudding user response：

You can sort all of the objects to insert by their index before adding them sequentially.

const foo = [
  {
    name: 'a',
  },
  {
    name: 'b'
  }
];
const bar = [
  {
    name: 'c',
    position: [1, 3]
  },
  {
    name: 'd',
    position: [2]
  }
]

bar.flatMap(x => x.position.map(p => [p, x]))
  .sort(([p1], [p2]) => p1 - p2).forEach(([p, o]) => foo.splice(p - 1, 0, o));
console.log(JSON.stringify(foo));

CodePudding user response：

You could build a temporary array with the wanted indices and splice with order.

const
    foo = [{ name: 'a' }, { name: 'b' }],
    bar = [{ name: 'c', position: [1, 3] }, { name: 'd', position: [2] }];

bar
    .reduce((r, item) => {
        item.position.forEach(pos => r[pos - 1] = item);
        return r;
    }, [])
    .forEach((item, i) => foo.splice(i, 0, item));

console.log(foo);

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