{"componentChunkName":"component---src-templates-post-js","path":"/javascript/razbiraemsya-s-putanitsei-mezhdu-metodami-javascript-slice-splice-i-split/","result":{"pageContext":{"slug":"razbiraemsya-s-putanitsei-mezhdu-metodami-javascript-slice-splice-i-split","content":"\n

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

\n\n\n\n

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

\n\n\n\n

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

\n\n\n\n

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

\n\n\n\n

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

\n\n\n\n

JavaScript массивы

\n\n\n\n

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

\n\n\n\n

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

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

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

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

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

\n\n\n\n

slice()

\n\n\n\n

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

\n\n\n\n
array.slice(from, until);
\n\n\n\n

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

\n\n\n\n

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

\n\n\n\n

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

\n\n\n\n
array.slice(0, until);
\n\n\n\n

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

\n\n\n\n
\n\n\n\n
array[0] --> 1              // включён\narray[1] --> 2              // включён\narray[2] --> 3              // включён\narray[3] --> \"hello world\"  // уже не включён\n
\n\n\n\n
Это может создать некое недопонимание. Именно по этому я назвал второй параметр until (до).
\n\n\n\n
let newArray = array.slice(0, 3); // Отдаётся также массив
\n\n\n\n
И наконец, я назначаю нарезанный массив на переменную newArray. Давайте посмотрим, что получается:
\n\n\n\n
\"\"
\n\n\n\n
\"\"
\n\n\n\n
Важное замечание: метод slice() также можно использовать и на строках.
\n\n\n\n
splice()
\n\n\n\n
Название этой функции очень похоже на slice(). Такая схожесть зачастую сбивает разработчиков с толку. Метод splice() изменяет массив, добавляя или удаляя элементы в нем. Давайте посмотрим, как мы можем удалить элементы с помощью splice():
\n\n\n\n
Удаление элементов
\n\n\n\n
Для их удаления нам надо задать параметр index и число элементов, которые будут удалены:
\n\n\n\n
array.splice(index, number of elements);
\n\n\n\n
Тут index — это начальная точка для удаления элементов. Элементы, которые имеют индекс ниже заданного не будут удалены:
\n\n\n\n
array.splice(2); // Каждый элемент, начиная с 3го будет удалён
\n\n\n\n
Если мы не указываем второй параметр, то будут удалены все элементы, начиная с заданного значения index.
\n\n\n\n
\"\"
\n\n\n\n
Во втором примере я задам вторым параметром число 1, что говорит о том, что элементы в массиве, начиная с числа index будут удалены по одному, при каждом вызове метода splice():
\n\n\n\n
array.splice(2, 1);
\n\n\n\n
\"\"
\n\n\n\n
После 1-го вызова:
\n\n\n\n
\"\"
\n\n\n\n
После 2-го вызова:
\n\n\n\n
\"\"
\n\n\n\n
В общем, это будет продолжаться пока вообще не останется элементов под индексом 2.
\n\n\n\n
Добавление элементов
\n\n\n\n
Для добавления элементов нам нужно указать 3, 4 и 5й параметры (в зависимости от того, сколько мы хотим добавить) методу splice():
\n\n\n\n
array.splice(index, number of elements, element, element);
\n\n\n\n
Как пример, я добавляю a и b в самое начала массива, при этом ничего не удаляя:
\n\n\n\n
array.splice(0, 0, 'a', 'b');
\n\n\n\n
\"\"
\n\n\n\n
split()
\n\n\n\n
Методы slice() и splice() для массивов. А вот метод split() используется для строк. Он делит строку на подстроки и отдаёт их в виде массива. Ему нужны 2 параметра и оба они опциональны.
\n\n\n\n
string.split(separator, limit);
\n\n\n\n
Separator: определяет как разделять строку. Запятой, символом или тп.
\n\n\n\n
Limits: ограничивает количество разделений, опираясь на заданное число.
\n\n\n\n
Этот метод не работает с массивами напрямую. Но однако, мы сначала можем конвертировать элементы массива в строку, а потом уже использовать метод split().
\n\n\n\n
Давайте посмотрим как это работает.
\n\n\n\n
Сначала мы конвертируем наш массив в строку при помощи метода toString():
\n\n\n\n
let myString = array.toString();
\n\n\n\n
\"\"
\n\n\n\n
Теперь давайте разделим myString по запятым, ограничив его до 3 подстрок и возвратим его, как массив:
\n\n\n\n
let newArray = myString.split(\",\", 3);\n
\n\n\n\n
\"\"
\n\n\n\n
Как мы видим, myString разделен запятыми. А так как мы ограничиваем разбитие строки до 3-х элементов в массиве, то только первые 3 из них будут возвращены.
\n\n\n\n
Обратите внимание, что если бы мы использовали array.split(\"\"), то каждый символ в строке был бы разделен на подстроки:
\n\n\n\n
\"\"
\n\n\n\n
Подводим итоги
\n\n\n\n
Slice()
\n\n\n\n\n\n\n\n
Splice()
\n\n\n\n\n\n\n\n
Split()
\n\n\n\n\n\n\n\n
Конечно же есть и другие встроенные JavaScript методы для работы с массивами и строками. Если вы поймете как их использовать, то они значительно упростят ваш процесс разработки.
\n","type":"js","date":"2021-01-27T21:14:20.000Z","acf":{"seo_desc":"Очень полезная статья про то, как работают методы slice(), splice() и split(). В реальном мире даже опытные разработчики делают в них ошибки.","keywords":"slice(), splice() и split() в javascript, как работают slice(), splice() и split() javascript, js slice(), splice() split()","pub_date":"2019-07-30","tags":"JavaScript, Функции"},"title":"Разбираемся с путаницей между JavaScript методами slice(), splice() и split()","id":"d3649fe4-c4f6-5d60-8269-f291cca2e0e9","excerpt":"
Очень полезная статья про то, как работают методы slice(), splice() и split(). В реальном мире даже опытные разработчики делают в них ошибки.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/01/splitsplicekfjdsn.jpg"},"interesting":[{"title":"Самые необходимые строковые и числовые методы в JavaScript","slug":"samie-neobhodimie-strokovie-i-chislovie-metody-v-javascript","type":"js"},{"title":"Понимаем каррирование в JavaScript","slug":"ponimaem-carrirovanie-v-javascript","type":"js"},{"title":"Разбираемся с путаницей между JavaScript методами slice(), splice() и split()","slug":"razbiraemsya-s-putanitsei-mezhdu-metodami-javascript-slice-splice-i-split","type":"js"}]}},"staticQueryHashes":["3576131997","63159454"]}