Встроенные методы JavaScript очень помогают нам при программировании, если мы правильно их понимаем. В этой статье я хотел бы объяснить три из них: методы slice (), splice () и split (). Возможно, из-за того, что их названия очень похожи, их часто путают даже опытные разработчики.
Я советую студентам и младшим разработчикам внимательно прочитать эту статью, потому что эти три метода также можно задать в РАБОЧИХ ИНТЕРВЬЮ.
Вы можете найти краткое изложение каждого метода в конце. Итак, начнем…
Массивы JavaScript
Во-первых, вам нужно понять, как работают массивы JavaScript. Как и в других языках программирования, мы используем массивы для хранения нескольких данных в JS. Но разница в том, что массивы JS могут одновременно содержать разные типы данных.
Иногда нам нужно выполнять операции с этими массивами. Затем мы используем некоторые методы JS, такие как slice () и splice (). Ниже вы можете увидеть, как объявить массив в JavaScript:
let arrayDefinition = []; // Array declaration in JS
Теперь давайте объявим еще один массив с другими типами данных. Я буду использовать его ниже в примерах:
let array = [1, 2, 3, "hello world", 4.12, true];
Это использование допустимо в JavaScript. Массив с разными типами данных: строка, числа и логическое значение.
Примечание. Ключевое слово
let- это функция ES6. Более подробную информацию о ES6 вы можете получить здесь.
Кусочек ( )
Метод slice () копирует заданную часть массива и возвращает эту скопированную часть как новый массив. Это не меняет исходный массив.
array.slice(from, until);
- От: разрезать массив, начиная с индекса элемента.
- До: разрезать массив до индекса другого элемента.
Например, я хочу вырезать первые три элемента из массива выше. Поскольку первый элемент массива всегда имеет индекс 0, я начинаю срезать «из» 0.
array.slice(0, until);
А теперь самое сложное. Когда я хочу разрезать первые три элемента, я должен указать параметр до как 3. Метод slice () не включает последний заданный элемент.
array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included
Это может создать некоторую путаницу. Вот почему я называю второй параметр «до».
let newArray = array.slice(0, 3); // Return value is also an array
Наконец, я назначаю нарезанный массив переменной newArray. Теперь посмотрим на результат:
Важное примечание: метод Slice () также можно использовать для строк.
Сращивание ()
Название этой функции очень похоже на slice (). Это сходство названий часто сбивает разработчиков с толку. Метод splice () изменяет массив, добавляя или удаляя из него элементы. Давайте посмотрим, как добавлять и удалять элементы с помощью splice ():
Удаление элементов
Для удаления элементов нам нужно указать параметр index и количество удаляемых элементов:
array.splice(index, number of elements);
Индекс - это отправная точка для удаления элементов. Элементы, которые имеют меньший номер индекса из данного индекса, не будут удалены:
array.splice(2); // Every element starting from index 2, will be removed
Если мы не определим второй параметр, каждый элемент, начиная с данного индекса, будет удален из массива:
В качестве второго примера я даю второму параметру значение 1, поэтому элементы, начиная с индекса 2, будут удаляться один за другим каждый раз, когда мы вызываем метод splice ():
array.splice(2, 1);
После первого звонка:
После 2-го звонка:
Это может продолжаться до тех пор, пока больше не будет индекса 2.
Добавление элементов
Для добавления элементов нам нужно передать их в качестве 3-го, 4-го, 5-го параметра (зависит от того, сколько добавить) методу splice ():
array.splice(index, number of elements, element, element);
В качестве примера я добавляю a и b в самое начало массива и ничего не удаляю:
array.splice(0, 0, 'a', 'b');
Расколоть ( )
Методы Slice () и splice () предназначены для массивов. Метод split () используется для строк. Он делит строку на подстроки и возвращает их в виде массива. Он принимает два параметра, и оба они необязательны.
string.split(separator, limit);
- Разделитель: определяет, как разделить строку… запятой, символом и т. д.
- Лимит: ограничивает количество разделений с заданным числом.
Метод split () не работает напрямую с массивами. Однако мы можем сначала преобразовать элементы нашего массива в строку, а затем использовать метод split ().
Посмотрим, как это работает.
Во-первых, мы преобразуем наш массив в строку с помощью метода toString ():
let myString = array.toString();
Теперь давайте разделим myString на запятые, ограничим их тремя подстроками и вернем их как массив:
let newArray = myString.split(",", 3);
Как мы видим, myString разделена запятыми. Поскольку мы ограничиваем split до 3, возвращаются только первые 3 элемента.
ПРИМЕЧАНИЕ. Если у нас есть такое использование:
array.split("");, тогда каждый символ строки будет разделен на подстроки:
Резюме:
Кусочек ( )
- Копирует элементы из массива
- Возвращает их как новый массив
- Не меняет исходный массив
- Начинает нарезку с… до заданного индекса: array.slice (от, до)
- В Slice нет параметра индекса «до».
- Может использоваться как для массивов, так и для строк
Сращивание ()
- Используется для добавления / удаления элементов из массива
- Возвращает массив удаленных элементов
- Меняет массив
- Для добавления элементов: array.splice (индекс, количество элементов, элемент)
- Для удаления элементов: array.splice (индекс, количество элементов)
- Может использоваться только для массивов
Расколоть ( )
- Делит строку на подстроки
- Возвращает их в виде массива
- Принимает 2 параметра, оба необязательные: string.split (separator, limit)
- Не меняет исходную строку
- Может использоваться только для струнных
Есть много других встроенных методов для массивов и строк JavaScript. Если вы изучите их использование, эти методы облегчат вам жизнь в программировании.
Надеюсь, теперь у вас есть лучшее понимание. Если нет, то не стесняйтесь задавать свои вопросы в разделе комментариев. Вы также можете ознакомиться с другой моей статьей о CSS ниже.
Если вы хотите узнать больше о веб-разработке, не стесняйтесь подписывайтесь на меня на Youtube!
Спасибо за вашу поддержку и время.
