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

davajte proyasnim putaniczu vokrug metodov slice splice i?v=1656522373

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

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

В конце вы можете найти краткое описание каждого метода. Если хотите, вы можете просмотреть видеоверсию ниже:

Итак начнем…

Массивы JavaScript

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

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

let arrayDefinition = [];   // Array declaration in JS

Теперь давайте объявим другой массив с разными типами данных. Я буду использовать его ниже в примерах:

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

Это использование есть действительный в JavaScript. Массив с разными типами данных: строкой, числами и логическим значением.

ломтик ( )

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

array.slice(from, until);

  • От: Разрежьте массив, начиная от индекс элемента
  • пока: Разрежьте массив пока индекс другого элемента

К примеру, я хочу вырезать первые три элемента из массива выше. Поскольку первый элемент массива всегда индексируется как 0, я начинаю разрезать. «с»0

array.slice(0, until);

Теперь вот сложная часть. Когда я хочу разрезать первые три элемента, я должен дать пока параметр как 3. The Метод 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

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

1*UECVH_JWknae04kVqTr1gg
Нарезать массив и назначить членов к новый массив
1*YImz2x-CAY-8wqoyT8c6eA
новый массив переменная теперь является массивом, а выходная остается неизменной

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

Сращение ( )

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

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

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

array.splice(index, number of elements);

указатель есть отправная точка для удаления частей. Элементы, которые имеют а меньший номер индекса из данного индекса не будет удален:

array.splice(2);  // Every element starting from index 2, will be removed

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

1*OGTbYRkU4C_5iMF5Sw9lBA
есть только индексы 0 и 1

Как второй пример, я даю второй параметр как 1, поэтому элементы начиная с индекса 2 будут удаляться один за другим каждый раз, когда мы вызываем сращение ( )метод:

array.splice(2, 1);

1*uCZHAfeq46dG182y6oHrpg
Массив в начале

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

1*gMh3g8RLvpAjMGxgfanB8w
3 удаляется да «Привет Мир» сейчас имеет индекс 2

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

1*6YWBPU0UsPeoJTcwn8-gWg
В этот раз, «Привет Мир» удаляется как индекс: 2

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

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

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

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

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

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

1*E7TMFWTYGJDkuhG3VrTCKw
а и б добавлено в начало массива, элементы не удалены

разделить ( )

ломтик( ) и сращение ( ) методы для массивов The разделить ( ) метод используется для струны. Он делит строчку на подстроки и возвращает их в виде массива. Для этого нужны 2 параметра, и оба есть необязательный.

string.split(separator, limit);

  • Разделитель: Определяет, как разделить строку… запятой, символом и т.п.
  • Лимит: Ограничивает количество расколов с заданным числом

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

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

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

let myString = array.toString();

1*JW9u0vQSmZM6wQ540w3eTg

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

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

1*v53Ct4WVDXNsCjzDAtpc_g
Возвращаются только первые 3 элемента

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

ПРИМЕЧАНИЕ: Если у нас есть такое использование: array.split(""); тогда каждый символ строки будет разделен на подстроки:

1*s7RYTgCHVGzZKXDJZYyjaQ
Каждый символ разделен один за другим

Резюме:

ломтик ( )

  • Копирует элементы из массива
  • Возвращает их как новый массив
  • Не изменяет исходный массив
  • Начинает разрезание с … к заданному индексу: array.slice (от, до)
  • Слайс не включает «пока» индексный параметр
  • Можно использовать как для массивов, так и для строчек

Сращение ( )

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

разделить ( )

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

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

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

Спасибо, что читаете!

Добавить комментарий

Ваш адрес email не будет опубликован.