Array.splice и Array.slice в JavaScript

Привет, Хабр! Представляю вашему вниманию перевод статьи “Array.splice and Array.slice in JavaScript” автора Kunal Tandon.

Вы просто обязаны использовать вышеупомянутые функции, доступные в прототипе JavaScript Array. Но они выглядят так похоже, что иногда можно запутаться между ними.

Ключевые различия

Array.splice изменяет исходный массив и возвращает массив, содержащий удаленные элементы.

Array.slice не изменяет исходный массив. Он просто возвращает новый массив элементов, который является подмножеством исходного массива.

Array.splice

Splice используется для изменения содержимого массива, которое включает удаление элементов, замену существующих элементов или даже добавление новых элементов в этот массив.

При использовании splice функции обновляется исходный массив.

Рассмотрим следующий массив:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

Array.spliceс синтаксис

arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Удаление элементов

Чтобы удалить элементы из массива, мы пишем:

var deleItems = arr.splice (3, 2);

Это удалит два элемента, начиная с индекса 3, и вернет удаленный массив. В результате получаем:

deleItems // [3, 4]
arr // [0, 1, 2, 5, 6, 7, 8]

Добавление новых элементов

Чтобы добавить новые элементы в массив, мы пишем:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
var arr2 = arr.splice (2, 0, 100, 101);

Начиная со второго элемента массива будут добавлены числа 100 и 101. Окончательные значения будут следующими:

arr2 // [], так как мы не удалили элемент из массив
аarr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8]

Изменение существующего элемента

Мы можем хитро изменить существующий элемент в массиве, используя splice, чтобы удалить элемент по номеру его индекса и вставить новый элемент на его место.

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

Чтобы заменить 3 на 100, мы пишем:

var arr2 = arr.splice (3, 1, 100); 
// что означает - в индексе 3 удалить 1 элемент и вставить 100

Мы получаем следующие значения для arr и arr2 после выполнения приведенного выше фрагмента кода:

arr2 // [3] так как мы удалили элемент 3 из массив arr
arr // [0, 1, 2, 100, 4, 5, 6, 7, 8]
// 3 заменяется на 100 в массиве arr 

Array.slice

В то время как splice может также вставлять и обновлять элементы массива, функция slice используется только для удаления элементов из массива.
Мы можем только удалить элементы из массива, используя функцию slice

Array.slice синтакси

arr.slice (startIndex, endIndex);

startIndex — начальный индекс элемента для нового массива, который мы должны получить в новом массиве
startIndex.endIndex (необязательно) — конечный индекс, до которого должно быть выполнено нарезание, не включая этот элемент.

Рассмотрим следующий массив:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8];

Чтобы получить часть массива из значений [2, 3, 4, 5], пишем:

var slicedArr = arr.slice (2, 6);

Обратите внимание, что здесь мы указали вторым аргументом 6, а не 5. После выполнения приведенного выше кода, мы получаем следующий массив:

arr // [0, 1, 2, 3, 4, 5, 6, 7, 8]
slicedArr // [2, 3, 4, 5]

Переменная arr остается неизменной после выполнения оператора slice, тогда как оператор splice обновлял исходный массив.

Итак, если мы хотим обновить исходный массив, мы используем функцию splice, но если нам нужна только часть массива, мы используем slice.