Удаление элементов из массива в JavaScript

• Удаление с конца массива
• Удаление с начала массива
• Удаление по индексу
• Удаление нескольких элементов
• Почему не стоит использовать delete
• Новый массив через filter()
• Очистка массива
• Что выбрать
• Итого

Удалять элементы из массива можно несколькими способами. Выбор зависит от того, где находится элемент: в конце, в начале, в середине или его нужно найти по условию.

let fruits = ['apple', 'orange', 'banana'];

fruits.pop();

console.log(fruits); // ['apple', 'orange']

Удаление с конца массива

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

let fruits = ['apple', 'orange', 'banana'];

fruits.pop();

console.log(fruits); // ['apple', 'orange']

pop() изменяет исходный массив и возвращает удаленный элемент.

let fruits = ['apple', 'orange', 'banana'];

let removedItem = fruits.pop();

console.log(removedItem); // banana
console.log(fruits); // ['apple', 'orange']

Если массив пустой, pop() вернет undefined.

let fruits = [];

console.log(fruits.pop()); // undefined

Удаление с начала массива

Метод shift() удаляет первый элемент массива.

let fruits = ['apple', 'orange', 'banana'];

fruits.shift();

console.log(fruits); // ['orange', 'banana']

shift() тоже изменяет исходный массив и возвращает удаленный элемент.

let fruits = ['apple', 'orange', 'banana'];

let removedItem = fruits.shift();

console.log(removedItem); // apple
console.log(fruits); // ['orange', 'banana']

Удаление из начала массива обычно тяжелее, чем удаление из конца: оставшиеся элементы нужно сдвинуть и пересчитать их индексы.

Удаление по индексу

Если нужно удалить элемент из середины массива, используют splice().

let fruits = ['apple', 'orange', 'banana'];

fruits.splice(1, 1);

console.log(fruits); // ['apple', 'banana']

Первый аргумент - индекс, с которого начинается удаление. Второй аргумент - сколько элементов нужно удалить.

fruits.splice(1, 1);

В этом примере удаляется один элемент с индексом 1.

splice() возвращает массив удаленных элементов.

let fruits = ['apple', 'orange', 'banana'];

let removedItems = fruits.splice(1, 1);

console.log(removedItems); // ['orange']
console.log(fruits); // ['apple', 'banana']

Удаление нескольких элементов

Чтобы удалить несколько элементов подряд, во втором аргументе splice() указывают нужное количество.

let numbers = [10, 20, 30, 40, 50];

numbers.splice(1, 3);

console.log(numbers); // [10, 50]

Здесь удаляются три элемента, начиная с индекса 1: 20, 30 и 40.

Почему не стоит использовать delete

Оператор delete удаляет значение по индексу, но не сдвигает остальные элементы и не уменьшает длину массива.

let fruits = ['apple', 'orange', 'banana'];

delete fruits[1];

console.log(fruits); // ['apple', empty, 'banana']
console.log(fruits.length); // 3

На месте удаленного элемента остается пустое место. Такой массив сложнее обрабатывать, поэтому для удаления элементов обычно используют pop(), shift(), splice() или filter().

Новый массив через filter()

Если исходный массив менять не нужно, можно создать новый массив через filter().

let users = ['Анна', 'Олег', 'Мария'];

let filteredUsers = users.filter((user) => user !== 'Олег');

console.log(filteredUsers); // ['Анна', 'Мария']
console.log(users); // ['Анна', 'Олег', 'Мария']

filter() оставляет только те элементы, для которых условие вернуло true.

Такой способ удобен, когда нужно удалить элемент по значению или по какому-то признаку.

let tasks = [
  { id: 1, title: 'HTML' },
  { id: 2, title: 'CSS' },
  { id: 3, title: 'JavaScript' },
];

let updatedTasks = tasks.filter((task) => task.id !== 2);

console.log(updatedTasks);

Очистка массива

Чтобы очистить массив, можно присвоить ему пустой массив.

let fruits = ['apple', 'orange', 'banana'];

fruits = [];

console.log(fruits); // []

Если нужно очистить именно тот же массив, можно установить length в 0.

let fruits = ['apple', 'orange', 'banana'];

fruits.length = 0;

console.log(fruits); // []

В обычных задачах чаще достаточно первого варианта. Второй полезен, когда важно очистить существующий массив, а не заменить его новой ссылкой.

Что выбрать

Если нужно удалить последний элемент, используйте pop().

Если нужно удалить первый элемент, подойдет shift().

Если известен индекс, используйте splice().

Если нужно получить новый массив без части элементов, используйте filter().

Итого

Удаление элементов зависит от задачи и от того, нужно ли изменять исходный массив.

• pop() удаляет последний элемент и возвращает его.
• shift() удаляет первый элемент и возвращает его.
• splice(index, count) удаляет элементы по индексу.
• filter() создает новый массив без элементов, которые не прошли условие.
• delete для удаления элементов массива обычно не используют, потому что он оставляет пустое место.