Как удалить элемент из массива? Назови разные способы.

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Средний
#JavaScript #Массивы #База JS

Краткий ответ

Есть несколько способов удалить элемент из массива в JavaScript:

  1. pop() — удаляет последний элемент 📉
  2. shift() — удаляет первый элемент 📉
  3. splice() — удаляет элементы по индексу 🔪
  4. filter() — создаёт новый массив без нужных элементов 🔄
const arr = [1, 2, 3, 4, 5];
 
// Удаляем последний
arr.pop(); // [1, 2, 3, 4]
 
// Удаляем первый
arr.shift(); // [2, 3, 4]
 
// Удаляем по индексу
arr.splice(1, 1); // [2, 4]
 
// Создаём новый без элемента
const filtered = arr.filter(x => x !== 2); // [4]

Полный ответ

Удалить элемент из массива — как вынуть вещь из коробки. Есть разные инструменты для этого! 📦🔧

pop() — удаляет последний элемент

Самый простой способ — убрать последнюю вещь из коробки:

const fruits = ['яблоко', 'банан', 'апельсин'];
 
// Удаляем последний элемент
const last = fruits.pop(); // Возвращает 'апельсин'
 
console.log(fruits); // ['яблоко', 'банан']
console.log(last);   // 'апельсин'

shift() — удаляет первый элемент

Убирает первую вещь из коробки:

const fruits = ['яблоко', 'банан', 'апельсин'];
 
// Удаляем первый элемент
const first = fruits.shift(); // Возвращает 'яблоко'
 
console.log(fruits); // ['банан', 'апельсин']
console.log(first);  // 'яблоко'

splice() — удаляет по индексу

Как хирургический скальпель — можно удалить любой элемент:

const fruits = ['яблоко', 'банан', 'апельсин', 'груша'];
 
// Удаляем один элемент с индексом 1
fruits.splice(1, 1); // Удаляет 'банан'
console.log(fruits); // ['яблоко', 'апельсин', 'груша']
 
// Удаляем несколько элементов
fruits.splice(0, 2); // Удаляет 'яблоко' и 'апельсин'
console.log(fruits); // ['груша']

filter() — создаёт новый массив

Создаёт новую коробку без нужных элементов:

const numbers = [1, 2, 3, 4, 5];
 
// Создаём новый массив без двоек
const filtered = numbers.filter(x => x !== 2);
 
console.log(numbers); // [1, 2, 3, 4, 5] — оригинал не меняется
console.log(filtered); // [1, 3, 4, 5] — новый массив

delete — не рекомендуется

Есть ещё [delete], но им пользоваться не стоит:

const arr = [1, 2, 3];
delete arr[1]; // Не делай так!
 
console.log(arr); // [1, empty, 3] — дырка в массиве!

Когда что использовать

pop/shift — для концов массива

// ✅ Когда нужно убрать с краёв
const stack = [1, 2, 3];
stack.pop();  // Убираем с конца — стек
stack.shift(); // Убираем с начала — очередь

splice — для середины

// ✅ Когда нужно удалить по индексу
const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // Удаляем элемент с индексом 2

filter — для условного удаления

// ✅ Когда нужно удалить по условию
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(x => x % 2 === 0); // [2, 4]

Частые ошибки

Использовать delete

// ❌ Плохо — создаёт дырки
const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, empty, 3]
 
// ✅ Хорошо — используй splice
const arr2 = [1, 2, 3];
arr2.splice(1, 1);
console.log(arr2); // [1, 3]

Забыть, что методы изменяют массив

// ❌ Ошибка — думают, что filter изменяет массив
const arr = [1, 2, 3];
arr.filter(x => x !== 2); // Не изменяет arr!
 
// ✅ Правильно — сохранить результат
const newArr = arr.filter(x => x !== 2);

Простые правила

  1. pop() — удаляет с конца 📉
  2. shift() — удаляет с начала 📉
  3. splice() — удаляет по индексу 🔪
  4. filter() — создаёт новый массив без элементов 🔄
  5. delete — не используй, создаёт дырки ⚠️
  6. pop/shift/splice — изменяют оригинал 🔄
  7. filter — создаёт новый массив 🆕

Знание разных способов удаления помогает выбрать правильный инструмент для каждой задачи! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪