Давайте устраним путаницу вокруг методов slice (), splice () и split () в JavaScript.

Программирование

Встроенные методы 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. Массив с разными типами данных: строка, числа и логическое значение.

Ломтик ( )

В срезе () метод копирует заданную часть массива и возвращает часть , которая скопирована в качестве нового массива. Это не меняет исходный массив.

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 ( ) :

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

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

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);

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

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

Это может продолжаться до тех пор, пока больше не будет индекса 2.

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

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

array.splice (индекс, количество элементов, элемент, элемент);

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

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

Трещина ( )

Методы Slice () и splice () предназначены для массивов. Метод split () используется для строк . Он разделяет строку на подстроки и возвращает их в виде массива. Он принимает 2 параметра, и оба они необязательны.

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 (от, до)
  • Срез не включает параметр индекса «до»
  • Может использоваться как для массивов, так и для строк

Сращивание ()

  • Используется для добавления / удаления элементов из массива
  • Возвращает массив удаленных элементов
  • Меняет массив
  • Для добавления элементов: array.splice (индекс, количество элементов, элемент)
  • Для удаления элементов: array.splice (индекс, количество элементов)
  • Может использоваться только для массивов

Трещина ( )

  • Делит строку на подстроки
  • Возвращает их в виде массива
  • Принимает 2 параметра, оба необязательны: string.split (separator, limit)
  • Не меняет исходную строку
  • Может использоваться только для струнных

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

Если вы хотите узнать больше о веб-разработке, подписывайтесь на меня на Youtube !

Спасибо за чтение!