При розробці коду на JavaScript, масиви є часто використовуваним типом даних. Виникає потреба у видаленні елементів із масивів. Як це зробити ефективно?
Масив в JavaScript — це об’єкт, що дозволяє зберігати впорядковані колекції даних. Він може містити нуль або більше елементів різних типів. Для доступу до окремих елементів використовуються числові індекси, що починаються з нуля.
У цій статті розглянемо синтаксис створення масивів у JavaScript, обґрунтуємо необхідність видалення елементів, а також розглянемо різноманітні методи видалення, з та без модифікації початкового масиву.
Синтаксис масивів у JavaScript
Масиви дозволяють зберігати множину значень під одним іменем змінної. Наприклад, якщо потрібно представити сім континентів, можна використати такий код:
const continent1 = "Asia"; const continent2 = "Africa"; const continent3 = "North America"; const continent4 = "South America"; const continent5 = "Antarctica"; const continent6 = "Europe"; const continent7 = "Australia"
Цей код можна зробити більш компактним, використовуючи масив:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Замість семи окремих змінних, ми використовуємо одну змінну `continents`, а квадратні дужки позначають масив об’єктів.
Щоб отримати доступ до першого континенту, ми можемо скористатись: `console.log(continents[0])`
Ви можете скористатися онлайн-компілятором JavaScript для перевірки свого коду.
Результат буде таким:
Для доступу до останнього елемента масиву, ми використаємо команду: `console.log(continents[6])`.
Важливо пам’ятати, що індексація в JavaScript починається з нуля.
Навіщо видаляти елементи з масиву JavaScript?
Масиви JavaScript можуть містити рядки, числа та інші типи даних. Іноді виникає потреба у видаленні одного або кількох елементів з масиву. Розглянемо деякі типові сценарії:
- Обробка динамічних даних: Масиви використовуються для зберігання динамічних наборів даних. Зміна вимог може викликати необхідність видалення елементів.
- Підтримання цілісності даних: Видалення застарілої інформації з масивів гарантує актуальність ваших даних.
- Керування пам’яттю: Розмір коду впливає на продуктивність. Видалення непотрібних даних оптимізує використання пам’яті.
Видалення елементів без зміни початкового масиву
Для збереження початкового масиву, краще створити новий масив без елемента, що підлягає видаленню. Це особливо важливо, коли масив передається як аргумент у функцію. Розглянемо кілька методів:
#1. Використання методу slice()
Використаємо метод `slice()` для видалення першого континенту зі списку.
Ось наш початковий масив:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Створимо новий масив, видаливши перший елемент:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Видалення першого елемента за допомогою slice() let newContinents = continents.slice(1); console.log(newContinents);
Результат:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#2. Використання методу filter()
Метод `filter()` створює новий масив, де елементи відповідають заданій умові. Можна встановити умову, яка виключатиме перший елемент масиву. Ось приклад:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Видалення першого елемента за допомогою filter() let newContinents = continents.filter((continent, index) => index !== 0); console.log(newContinents);
Результат виконання коду:
[ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Використання `slice()` разом із `concat()`
Попередні приклади видаляли перший елемент. Як видалити, скажімо, третій чи четвертий елемент? Для цього поєднаємо методи `slice()` та `concat()`. Наступний приклад видалить четвертий елемент:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Видалення четвертого елемента за допомогою slice() та concat() let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4)); console.log(continentsWithoutFourth);
Виконання цього коду дасть наступний результат:
[ 'Asia', 'Africa', 'North America', 'Antarctica', 'Europe', 'Australia' ]
Метод `slice()` створює два фрагменти масиву. Потім, `concat()` поєднує їх, пропускаючи четвертий елемент. Такий підхід підходить для видалення елемента з будь-якої позиції.
#4. Використання циклу `for` разом із `push()`
Виключимо п’ятий елемент зі списку, використовуючи цикл `for` і метод `push()`. Розглянемо код:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Видалення п'ятого елемента за допомогою циклу for та push()
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
if (i !== 4) {
continentsWithoutFifth.push(continents[i]);
}
}
console.log(continentsWithoutFifth);
Цикл `for` ітерує по кожному елементу масиву. Умова `if` перевіряє, чи індекс не дорівнює 4. Якщо умова виконується, елемент додається до нового масиву.
Результат виконання коду:
[ 'Asia', 'Africa', 'North America', 'South America', 'Europe', 'Australia' ]
Видалення елементів зі зміною початкового масиву
Можна безпосередньо змінювати структуру початкового масиву, видаляючи елементи. Розглянемо деякі методи:
#1. Використання методу `pop()`
Метод `pop()` видаляє останній елемент з масиву. Початковий масив:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
Код для видалення останнього елемента:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia']; // Видалення останнього елемента за допомогою pop() let lastContinent = continents.pop();
Вивід оновленого масиву:
console.log("Updated Continents Array:", continents);
Результат:
Updated Continents Array: [ 'Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe' ]
Також можна перевірити, який саме елемент було видалено:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Видалення останнього елемента за допомогою pop()
let lastContinent = continents.pop();
console.log("Removed Continent:", lastContinent);
#2. Використання методу `splice()`
Метод `splice()` дозволяє видаляти елементи з масиву, починаючи з вказаного індексу. Наприклад, видалимо елемент з індексом 2:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Видалення елемента з індексом 2 за допомогою splice()
let removedElement = continents.splice(2, 1);
console.log("Removed Element:", removedElement);
console.log("Updated Continents Array:", continents);
Цей код змінює початковий масив та повертає масив видалених елементів. Використовуються два оператори `console.log` для виводу видалених елементів та оновленого масиву.
Результат виконання коду:
Removed Element: [ 'North America' ] Updated Continents Array: [ 'Asia', 'Africa', 'South America', 'Antarctica', 'Europe', 'Australia' ]
#3. Використання методу `shift()`
Метод `shift()` видаляє перший елемент з масиву JavaScript. Він змінює початковий масив та повертає видалений елемент. Продовжимо використовувати масив континентів.
Видалення першого елемента:
let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Видалення першого елемента за допомогою shift()
let removedContinent = continents.shift();
console.log("Removed Continent:", removedContinent);
console.log("Updated Continents Array:", continents);
Один оператор `console.log` виводить видалений континент, інший — оновлений масив.
Результат:
Removed Continent: Asia Updated Continents Array: [ 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia' ]
Додавання елемента до масиву в JavaScript
Крім видалення, іноді потрібно додати елементи до масиву. Розглянемо деякі методи:
#1. Метод `push()`
Використаємо наступний масив для прикладів:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
Можна додати новий колір в кінець масиву за допомогою методу `push()`:
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Додавання нового кольору до масиву
colors.push('orange');
Тепер масив містить шість кольорів.
#2. Метод `unshift()`
Можна додати новий елемент на початок масиву за допомогою методу `unshift()`. Знову використаємо масив кольорів.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Додавання нового кольору до масиву
colors.unshift('orange');
console.log(colors);
Як видно на скріншоті, оранжевий колір тепер є першим елементом масиву.
Висновок
Тепер ви розумієте різні способи видалення елементів з масивів JavaScript, і можете писати більш ефективний код. Вибір методу залежить від ваших потреб, навичок та вподобань.
Метод `slice()` є оптимальним вибором, якщо потрібен простий підхід без зміни початкового масиву. Поєднання `slice()` та `concat()` чудово підходить для видалення елементів з будь-якої позиції.
Ознайомтеся зі статтею про шпаргалки JavaScript для розробників.