Давайте прояснимо плутанину навколо методів 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. метод зрізу () не включає в останній заданий елемент.

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 () . Ця схожість імен часто бентежить розробників. Сплайсингу () Метод змінює масив, шляхом додавання або видалення елементів з неї. Давайте подивимося, як додавати та видаляти елементи за допомогою сплайсингу ( ) :

Видалення елементів

Для видалення елементів нам потрібно вказати параметр 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 (індекс, кількість елементів, елемент, елемент);

Як приклад, я додаю 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 розділяється комами. Оскільки ми обмежуємо розбиття на 3, повертаються лише перші 3 елементи.

ПРИМІТКА. Якщо у нас є таке використання:array.split("");тоді кожен символ рядка буде розділений на підрядки:

Короткий зміст:

Фрагмент ()

  • Копіює елементи з масиву
  • Повертає їх як новий масив
  • Не змінює вихідний масив
  • Починає нарізання з… до заданого індексу: array.slice (з, до)
  • Зріз не включає параметр індексу "до"
  • Може використовуватися як для масивів, так і для рядків

Зрощення ()

  • Використовується для додавання / видалення елементів з масиву
  • Повертає масив видалених елементів
  • Змінює масив
  • Для додавання елементів: array.splice (індекс, кількість елементів, елемент)
  • Для видалення елементів: array.splice (індекс, кількість елементів)
  • Може використовуватися лише для масивів

Розділити ()

  • Ділить рядок на підрядки
  • Повертає їх у масиві
  • Бере 2 параметри, обидва необов’язкові: string.split (роздільник, ліміт)
  • Не змінює початковий рядок
  • Може використовуватися лише для рядків

Існує багато інших вбудованих методів для масивів і рядків JavaScript, що полегшують роботу з програмуванням на JavaScript. Далі ви можете переглянути мою нову статтю про методи підрядків JavaScript.

Якщо ви хочете дізнатись більше про веб-розробку, сміливо стежте за мною на Youtube !

Дякую за читання!