JavaScript. Як видалити елемент масиву

Як і все інше JavaScript, видалення елемента з масиву можна зробити кількома способами. Для початку розглянемо базові можливості, а потім більш складні варіанти.

Перед початком цієї посади рекомендую вам ознайомитися з методами пошуку масиву, т.к.

Видалення елемента за допомогою splice()

Перший варіант, який ми розглянемо з використанням методу splice() . Він приймає три параметри і змінює вихідний масив.

Першим параметром ми вказуємо індекс елемента в масиві, який ми хочемо видалити.

Якщо ви не знаєте індексу елемента в масиві, ми можемо його визначити за допомогою методу indexOf()

const arr = [0, 1, 2, 3, 4, 5]; const index = arr. (arr); // [0, 1, 3, 4, 5];

Метод indexOf - повертає нам індекс шуканого елемента в масиві, або -1 якщо такий елемент не знайдений. Для цього ми робимо перевірку index !== -1 .

У випадку, якщо у вас є масив об'єктів, а не просто масив з елементами, щоб знайти індекс потрібного елемента, ви також можете скористатися методом findIndex() .

Видалення першого та останнього елемента в масиві

Для видалення останнього елемента з масиву ми можемо використовувати метод pop(), який потім поверне нам елемент, що видаляється, для порожнього масиву.

const arr = [0, 1, 2, 3, 4, 5]; const removedEl = arr.pop(); removedEl);

Тут як здається все просто. Також ми можемо використовувати метод splice для видалення останнього елемента:

const arr = [0, 1, 2, 3, 4, 5]; // Індекс останнього елемента обчислюємо його довжину // Т.к. порядок елементів починається з 0, // нам потрібно від довжини відібрати одиницю для отримання індексу останнього елемента. const lastEl = arr.length - 1; arr.splice(lastEl); console.log(arr); // [0, 1, 2, 3, 4]

Видалити перший елемент масиву ще простіше. Для цього ми можемо також використовувати метод splice()

const arr = [0, 1, 2, 3, 4, 5]; arr.splice(0, 1); // де 0 - це індекс першого елемента в масиві

Але ми можемо використовувати метод shift() — він витягне перший елемент у масиві і поверне їх у нашу змінну, тобто. це аналог методу pop() для останнього елемента масиву.

const arr = [0, 1, 2, 3, 4, 5]; const removedEl = arr.shift(); console.log(arr); // [1, 2, 3, 4, 5] console.log(removedEl); // 0

Видалення елемента за умовою

Інший варіант це використання методу filter(), він є складнішим, але й дає можливість застосовувати умови для фільтрації – які елементи потраплять у новий масив, а які ні.

const arr = [0, 1, 2, 3, 4, 5]; // У новий масив не буде повернено елемент, який дорівнює 2 const newArr = arr.filter(el => el! == 2); console.log(newArr); // [0, 1, 3, 4, 5] // У новий масив будуть повернуті числа кратні 2 const multipleOfTwo = arr.filter(el => (el % 2) === 0); console.log(multipleOfTwo); // [0, 2, 4] // Отримаємо елементи, які більші або рівні 2 і менше або рівні 4 const newArr2 = arr.filter(el => el >= 2 && el  

Докладніше про метод JS filter() можете прочитати в цьому пості.

Функція для видалення елементів із масиву

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

const removeArrEl = (arr, value) => < return arr.filter(el =>el !== value); > // Передамо масив чисел і видалимо звідти 2 console.log(removeArrEl([1,2,3,4], 2)); // [1, 3, 4]

Як видалити дублі в масиві?

Перший спосіб. Для того, щоб видалити елементи масиву, що повторюються, можна скористатися наступним способом:

const arr = [2, 'John', 57, -1, 2, 'Smith', 'John']; const uniqArr = [. new Set(arr)]; console.log(uniqArr); // [2, 'John', 57, -1, 'Smith']

Другий спосіб. За допомогою методу filter() ми проходимося по нашому масиву і дивимося, чи в даному масиві цей елемент:

const uniqArray = arr.filter((item, index) => < return index === arr.indexOf(item); >); console.log(uniqArray); // [2, 'John', 57, -1, 'Smith']

Третій спосіб. За допомогою методу reduce():

const uniqArray = arr.reduce((uniq, item, index) => < return uniq.includes(item) ? uniq : [. uniq, item]; >, []); console.log(uniqArray); // [2, 'John', 57, -1, 'Smith']

Як видалити елемент із масиву об'єктів?

Зі звичайними масивами ми розібралися, тепер давайте розглянемо як видалити елемент масиву, якщо це масив об'єктів. У пості, який я згадував вище, є розділ, як виконати пошук по масиву з об'єктами:

const arr = [ < name: 'Ben', age: 21 >, < name: 'Clif', age: 22 >, < name: 'Eric', age: 18 >, < name: 'Anna', age: 27 >,]; const index = arr.findIndex(item => item.name === 'Anna'); arr.splice(index, 1); console.log(arr); // залишається три елементи

Також ми можемо використовувати метод filter() і отримати новий масив із вже віддаленим об'єктом

const newArr = arr.filter(item => item.name !== 'Anna'); console.log(newArr);

Різниця в тому, що ми отримуємо новий масив і при цьому будуть видалені всі об'єкти з name === 'Anna'

Ваші запитання та коментарі:

Додати коментар Скасувати відповідь

Свіжі записи

Копіювання матеріалів дозволено лише з посиланням на джерело Web-Dev.guru
2024 © Всі права захищені.

JS Remove Element - Видалення елемента за допомогою JavaScript

JavaScript надає кілька способів видалення елементів із DOM.

1. За допомогою методу remove():

javascript const element = document.getElementById("myElement"); element.remove();

У цьому прикладі ми вибираємо елемент з ідентифікатором "myElement" за допомогою методу getElementById, а потім викликаємо метод remove() для видалення цього елемента з DOM.

2. За допомогою методу removeChild():

javascript const parent = document.getElementById("parentElement"); const child = document.getElementById("childElement"); parent.removeChild(child);

У цьому прикладі спочатку вибираємо батьківський елемент з ідентифікатором "parentElement", а потім вибираємо видалений елемент з ідентифікатором "childElement". Потім ми викликаємо метод removeChild() видалення віддаленого елемента з батьківського елемента.

3. За допомогою властивості parentNode і removeChild():

javascript const child = document.getElementById("childElement"); child.parentNode.removeChild(child);

У цьому прикладі ми вибираємо віддалений елемент з ідентифікатором "childElement" і потім викликаємо метод батьківського елемента childNode і removeChild() для видалення віддаленого елемента з DOM.

Як видалити останній об'єкт JS?

JavaScript (JS) є однією з найпопулярніших мов програмування, яка широко використовується для розробки веб-додатків. У цій статті ми розглянемо кілька способів видалення останнього об'єкта JS.

Зміст

JavaScript (JS) є однією з найпопулярніших мов програмування, яка широко використовується для розробки веб-додатків. При роботі з JS-об'єктами іноді виникає необхідність видалити останній об'єкт із масиву чи колекції. У цій статті ми розглянемо кілька способів видалення останнього об'єкта JS.

Джерело зображення: dzen.ru

1. Метод pop()

Метод pop() є вбудованою функцією JS, яка видаляє останній елемент з масиву та повертає його. Цей спосіб можна використовувати для видалення останнього об'єкта з масиву. Розглянемо приклад:

let arr = [, ,]; let lastObject = arr.pop(); console.log('Видалений об'єкт:', lastObject); console.log('Об'єкти, що залишилися:', arr);

В результаті виконання цього коду буде видалено останній об'єкт , а об'єкти, що залишилися, і будуть виведені в консоль.

Джерело зображення: efim360.ru

2. Використання довжини масиву

Ще одним способом видалення останнього об'єкта з масиву є використання властивості length масиву. Розглянемо приклад:

let arr = [, ,]; arr.length = arr.length - 1; console.log('Об'єкти, що залишилися:', arr);

В результаті виконання цього коду останній об'єкт буде видалений, а об'єкти, що залишилися, і будуть виведені в консоль.