Разбираемся с путаницей между JavaScript методами slice(), splice() и split()

Очень полезная статья про то, как работают методы slice(), splice() и split(). В реальном мире даже опытные разработчики делают в них ошибки.

Перевод статьи Let’s clear up the confusion around the slice( ), splice( ), & split( ) methods in JavaScript

Встроенные в JavaScript методы действительно сильно помогают в процессе разработки, особенно если мы понимаем принцип их работы должным образом. Я бы хотел объяснить функционал трёх из них: это splice(), slice() и split(). Возможно потому, что их имена очень похожи — их зачастую путают даже опытные разработчики.

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

Вы найдете обобщенные описания методов в конце статьи. Ну а теперь давайте начнем.

JavaScript массивы

Во первых, вам необходимо понять как работают массивы в JavaScript. Как и в других языках программирования, мы используем массивы для хранения разнообразных данных в JS.

Иногда нам нужно выполнять какие-либо операции на этих массивах. И тогда мы прибегаем к JavaScript методам, например к slice() или splice(). Ниже вы видите, как объявлять массив в JavaScript:

let arrayDefinition = []; // Объявление массива

А теперь давайте объявим ещё один массив с разными типами данных. Ниже, в своих примерах, я буду использовать именно его :

let array = [1, 2, 3, "hello world", 4.12, true];

Такое возможно в JavaScript. Массив с разными типами данных: строка, число и булево значение.

slice()

Метод slice() копирует заданную часть массива и возвращает её в виде совершенно нового массива. Этот метод вообще не трогает оригинальный массив:

array.slice(from, until);

From: с индекса какого элемента начинается нарезка массива

Until: до какого элемента массива нарезается массив

Для примера, нам нужно нарезать первые три элемента из вышеуказанного массива. Так как первый элемент в массиве всегда имеет индекс 0, то начнём мы нарезку именно с него.

array.slice(0, until);

А теперь хитрый момент. Когда мне надо нарезать первые три элемента, мне надо задать параметр until = 3. Почему? Потому что slice() не затрагивает последний заданный элемент.

array[0] --> 1              // включён
array[1] --> 2              // включён
array[2] --> 3              // включён
array[3] --> "hello world"  // уже не включён

Это может создать некое недопонимание. Именно по этому я назвал второй параметр until (до).

let newArray = array.slice(0, 3); // Отдаётся также массив

И наконец, я назначаю нарезанный массив на переменную newArray. Давайте посмотрим, что получается:

Важное замечание: метод slice() также можно использовать и на строках.

splice()

Название этой функции очень похоже на slice(). Такая схожесть зачастую сбивает разработчиков с толку. Метод splice() изменяет массив, добавляя или удаляя элементы в нем. Давайте посмотрим, как мы можем удалить элементы с помощью splice():

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

Для их удаления нам надо задать параметр index и число элементов, которые будут удалены:

array.splice(index, number of elements);

Тут index — это начальная точка для удаления элементов. Элементы, которые имеют индекс ниже заданного не будут удалены:

array.splice(2); // Каждый элемент, начиная с 3го будет удалён

Если мы не указываем второй параметр, то будут удалены все элементы, начиная с заданного значения index.

Во втором примере я задам вторым параметром число 1, что говорит о том, что элементы в массиве, начиная с числа index будут удалены по одному, при каждом вызове метода splice():

array.splice(2, 1);

После 1-го вызова:

После 2-го вызова:

В общем, это будет продолжаться пока вообще не останется элементов под индексом 2.

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

Для добавления элементов нам нужно указать 3, 4 и 5й параметры (в зависимости от того, сколько мы хотим добавить) методу splice():

array.splice(index, number of elements, element, element);

Как пример, я добавляю a и b в самое начала массива, при этом ничего не удаляя:

array.splice(0, 0, 'a', 'b');

split()

Методы slice() и splice() для массивов. А вот метод split() используется для строк. Он делит строку на подстроки и отдаёт их в виде массива. Ему нужны 2 параметра и оба они опциональны.

string.split(separator, limit);

Separator: определяет как разделять строку. Запятой, символом или тп.

Limits: ограничивает количество разделений, опираясь на заданное число.

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

Давайте посмотрим как это работает.

Сначала мы конвертируем наш массив в строку при помощи метода toString():

let myString = array.toString();

Теперь давайте разделим myString по запятым, ограничив его до 3 подстрок и возвратим его, как массив:

let newArray = myString.split(",", 3);

Как мы видим, myString разделен запятыми. А так как мы ограничиваем разбитие строки до 3-х элементов в массиве, то только первые 3 из них будут возвращены.

Обратите внимание, что если бы мы использовали array.split(""), то каждый символ в строке был бы разделен на подстроки:

Подводим итоги

Slice()

• Копирует элементы из массива
• Отдаёт их как новый массив
• Не трогает изначальный массив
• Начинает нарезку с … до заданного индекса: array.slice (from, until)
• Последний параметр не нарезается методом Slice()
• Может использоваться как и для массивов, так и для строк

Splice()

• Используется для добавления/удаления элементов из массива
• Отдаёт массив удаленных элементов
• Изменяет массив
• Для добавления элементов используйте: array.splice (index, number of elements, element)
• Для удаления элементов: array.splice (index, number of elements)
• Может использоваться только для массивов

Split()

• Разделяет строку на подстроки
• Отдаёт их в массив
• Берёт 2 параметра, оба опциональны: string.split(separator, limit)
• Не изменяет изначальную строку
• Может использоваться только для строк

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