Під час написання коду JavaScript ви часто стикаєтеся з масивами. Як ви можете видалити елемент із масиву в JavaScript?
У JavaScript масив — це тип глобального об’єкта, який можна використовувати для зберігання даних. Масив у JavaScript може містити список, що містить нуль або більше типів даних або впорядковану колекцію. Щоб отримати доступ до певних елементів масиву, ми використовуємо нумеровані індекси, починаючи з 0.
У цій статті я опишу синтаксис для створення масивів у JavaScript, чому потрібно видалити елемент із масиву в 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'];
Замість 7 змінних у нас є лише одна змінна, і ми використовуємо квадратні дужки для представлення наших об’єктів.
Якщо ви хочете отримати доступ до першого континенту в нашому списку, ви можете виконати цю команду; console.log(континенти[0])
Ви можете скористатися нашими безкоштовними онлайн-компілятор JavaScript щоб перевірити ваш код.
Ось що ви отримуєте:
Якщо ви хочете отримати доступ до останнього елемента в нашому масиві, ви запустите цю команду; console.log(континенти[6]).
Зверніть увагу, що нумерація в JavaScript починається з 0.
Навіщо видаляти елемент із масиву 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']; // Remove the first element using slice let newContinents = continents.slice(1); If you now run: 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']; // Remove the first element using filter() method 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']; // Remove the fourth element using slice and 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'];
// Remove the fifth element using a for loop and push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
if (i !== 4) {
continentsWithoutFifth.push(continents[i]);
}
}
console.log(continentsWithoutFifth);
Цикл for повторює кожен елемент у нашому масиві континентів. Ми використовуємо оператор if, щоб перевірити, чи поточний індекс не дорівнює чотирьом. Якщо умова виконується, елементи вставляються в новий масив.
Ось що ми отримуємо, коли ви запускаєте код:
[ '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']; // Remove the last element using 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'];
// Remove the last element using 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'];
// Remove the element at index 2 using 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'];
// Remove the first element using 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'];
// Add a new color to the array
colors.push('orange');
Наш масив тепер матиме шість кольорів.
#2. Метод unshift().
Ви можете додати новий елемент на початок масиву за допомогою методу unshift(). Ми все ще можемо використовувати масив кольорів.
let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);
Як ви можете бачити на наступному скріншоті, помаранчевий тепер є першим кольором у нашому масиві:
Висновок
Тепер ви розумієте, як видалити елемент у масиві JavaScript і створити ефективний код. Вибір підходу залежатиме від ваших кінцевих цілей, умінь і вподобань.
Метод slice() є ідеальним вибором, якщо вам потрібен простий підхід і ви не хочете змінювати вихідний масив. З іншого боку, я знайшов поєднання методів slice() і concat() ідеальним вибором, якщо ви хочете видалити будь-який елемент.
Перегляньте нашу статтю про шпаргалки JavaScript для розробників.