Как я могу заставить два JS Splice работать вместе

Question

У меня есть два метода сплайсинга, которые работают как положено, но только если у меня есть по одному за раз

const prev = [
    [135,136,137,138,139],
    [275,276,277,278,279],
];

const after = [
    [141,142,143,144,145],
    [281,282,283,284,285],
];

scrollFrom.splice(0, 0, 135,136,137,138,139);

Я получаю:

[135, 136, 137, 138, 139, 140 ...]

Если у меня только:

(...)
scrollFrom.splice(1, 0, ...after[0]);

Я получу:

[140, 141, 142, 143, 144, 145 ...]

Однако, если у меня есть обе функции сплайсинга, например:

(...)
scrollFrom.splice(0, 0, ...prev[0]);
scrollFrom.splice(1, 0, ...after[0]);

Результат будет таким:

[135, 141, 142, 143, 144, 145, 136, 137, 138, 139, 140 ... ]

Что бы я хотел получить, это:

[135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145 ... ]

Можете ли вы помочь мне понять, что я делаю неправильно или другие решения? Заранее спасибо.

Answer 1

Я думаю, проблема в том, что вы не разрешаете вставлять элементы, которые вы уже вставили. Вы используете индекс 1 для второго splice, но prev содержит более одной записи. Insted:

scrollFrom.splice(0, 0, ...prev[0]);
scrollFrom.splice(prev[0].length, 0, ...after[0]);
// −−−−−−−−−−−−−−−^^^^^^^^^^^^^^

Live Пример:

const prev = [
    [135,136,137,138,139],
    [275,276,277,278,279],
];

const after = [
    [141,142,143,144,145],
    [281,282,283,284,285],
];

const scrollFrom = []; // Or whatever

scrollFrom.splice(0, 0, ...prev[0]);
scrollFrom.splice(prev[0].length, 0, ...after[0]);
// −−−−−−−−−−−−−−−^^^^^^^^^^^^^^

console.log(scrollFrom);

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

Answer 2

При вызове второго splice вы должны учитывать элементы, вставленные с использованием первого splice. Поэтому вместо сращивания из 1 следует выполнять сращивание после последнего элемента:

let initialLength = scrollFrom.length;                                  // cache the initial length of 'scrollFrom' in case it is not equal to 1 (contains 0 or more than 1 elements)
scrollFrom.splice(0, 0, ...prev[0]);                                    // insert elements from `prev[0]` at the begining of the array
scrollFrom.splice(prev[0].length + initialLength, 0, ...after[0]);      // insert elements from `after[0]` at the "new end" which is after the newly added elements and the already existing elements

Или еще лучше: использовать unshift для вставки элементов prev[0] и push для вставки after[0] такие элементы:

scrollFrom.unshift(...prev[0]);
scrollFrom.push(...after[0]);

unshift вставит новые элементы до уже существующих элементов scrollFrom, тогда как push вставит их после.

Answer 3

Я не учел, что индексы массива увеличиваются с первым соединением, да!

            scrollFrom.splice(0, 0, ...prev[0]);
            scrollFrom.splice(6, 0, ...after[0]);

Возвращает: [135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, ...] отлично!

Спасибо за ответы.