Slice или Splice в JavaScript

Среди JavaScript разработчиков распространено непонимание разницы между этими двумя методами. Знаете ли вы в чем отличие slice от splice?

Оба эти метода предназначены для разбиения массива JavaScript на части, но не понимание когда нужно использовать slice, а когда splice ведет к трудно-отлавливаемым ошибкам. Давайте рассмотрим каждый из двух методов по отдельности, тогда разница станет очевидна.

Slice - режем и создаем

Английский глагол slice переводится как "резать". Честно говоря, не понимаю чем руководствовались разработчики спецификации, но полагаться на перевод слов в JS нельзя. Согласно спецификации ECMAScript 5.1, метод slice принимает два аргумента: начальный и конечный индексы. Затем создается новый массив содержащий элементы старого от начального индекса до конечного. Самое важное - всегда создается новый массив, т.е. массив к которому был применен метод останется прежним. Так же не забывайте, что вторым параметром указывается не количество элементов, а конечный индекс, поэтому второй параметр всегда должен быть больше первого, иначе вернется пустой массив. Рассмотрим примеры.

var a = [0, 1, 2, 3, 4, 5];
console.log(a); // [0, 1, 2, 3, 4, 5]
var b = a.slice(3, 5);
console.log(a); // [0, 1, 2, 3, 4, 5] 
console.log(b); // [3, 4] 
var c = a.slice(4, 2);
console.log(a); // [0, 1, 2, 3, 4, 5] 
console.log(c);// []

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

Splice - режем и делим

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

var a = [0, 1, 2, 3, 4, 5];
console.log(a); // [0, 1, 2, 3, 4, 5]
var b = a.splice(3, 5);
console.log(a); // [0, 1, 2]
console.log(b); // [3, 4, 5] 
var c = a.splice(4, 2);
console.log(a); // [0, 1, 2]
console.log(c); // []

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

Так же метод splice удобно использовать для удаления элементов массива. Напомню, что обычный delete a[1]; не удалит сам элемент, а установит его в undefined. Чтобы удалить элемент лучше всего использовать a.splice(1, 1);

var a = [0, 1, 2, 3, 4, 5];
delete a[1];
console.log(a); // [0, undefined, 2, 3, 4, 5]

var a = [0, 1, 2, 3, 4, 5];
a.splice(1, 1);
console.log(a); // [0, 2, 3, 4, 5]

Замечу, что в последней версии Google Chrome консоль в первом случае покажет вам такой результат: [0, 2: 2, 3: 3, 4: 4, 5: 5]. Вероятно, она просто не отобразила undefined-элемент, т.к. на самом деле удаления не произошло.