Как удалить элемент из массива в TypeScript: лучшие методы

Удаление элементов из массива в TypeScript: полное руководство

TypeScript — это надстройка над JavaScript, поэтому все стандартные методы массивов JavaScript работают и в TypeScript. Однако, благодаря строгой типизации, мы можем писать более безопасный и предсказуемый код. Рассмотрим основные способы удаления элементов, а также их плюсы и минусы.

1. Удаление по индексу с помощью splice() (мутирующий)

Метод splice() изменяет исходный массив (мутирует его) и возвращает массив удалённых элементов. Это классический способ, но он изменяет исходные данные, что может привести к побочным эффектам.

const numbers: number[] = [10, 20, 30, 40, 50];
const index = 2; // Удаляем элемент с индексом 2 (значение 30)

// splice(индекс, количество_удаляемых_элементов)
const removed = numbers.splice(index, 1); // removed = [30], numbers = [10, 20, 40, 50]

console.log(numbers); // [10, 20, 40, 50]
console.log(removed); // [30]

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

2. Удаление по условию с помощью filter() (иммутабельный)

Метод filter() создаёт новый массив, содержащий все элементы, которые удовлетворяют условию. Исходный массив остаётся неизменным. Это предпочтительный способ в функциональном программировании и React (особенно при работе с состоянием через useState).

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

// Удаляем пользователя с id = 2
const updatedUsers = users.filter(user => user.id !== 2);

console.log(updatedUsers); 
// [{ id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' }]
console.log(users); // Исходный массив не изменился

Когда использовать: почти всегда, когда не требуется мутация. Особенно в Redux, React state, Angular (с OnPush стратегией) и любых случаях, где важна неизменяемость (immutability).

3. Удаление первого найденного элемента с помощью findIndex() + splice()

Если нужно удалить первый элемент, удовлетворяющий условию (а не все), комбинируем findIndex() и splice().

const items: string[] = ['apple', 'banana', 'apple', 'orange'];
const target = 'apple';

const index = items.findIndex(item => item === target);
if (index !== -1) {
  items.splice(index, 1); // Удаляем только первое вхождение
}

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

Важно: findIndex() возвращает -1, если элемент не найден, поэтому всегда проверяйте это условие, чтобы избежать ошибок.

4. Удаление последнего элемента с помощью pop()

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

const stack: number[] = [1, 2, 3, 4];
const last = stack.pop(); // last = 4, stack = [1, 2, 3]

5. Удаление первого элемента с помощью shift()

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

const queue: string[] = ['first', 'second', 'third'];
const first = queue.shift(); // first = 'first', queue = ['second', 'third']

Рекомендации для TypeScript

• Иммутабельность: отдавайте предпочтение filter(), если не требуется мутация. Это делает код более предсказуемым и упрощает отладку.
• Типизация: TypeScript автоматически выводит типы при использовании этих методов. Например, filter() вернёт User[], а splice() — User[] (массив удалённых элементов).
• Производительность: для очень больших массивов (10k+ элементов) splice() может быть быстрее, так как не создаёт новый массив. Но в 99% случаев разница незаметна.
• ReadonlyArray: если у вас ReadonlyArray<T> или readonly T[], мутирующие методы (splice, pop, shift) недоступны. Используйте только filter().

В итоге, для вашей задачи с пользователями лучшим решением будет filter():

const usersWithoutBob = users.filter(user => user.id !== 2);

Это безопасно, читаемо и соответствует лучшим практикам TypeScript.

const arr: number[] = [1, 2, 3];
delete arr[1]; // arr становится [1, empty, 3]
console.log(arr.length); // 3 — длина не изменилась!
console.log(arr[1]); // undefined

interface Data {
  id: number;
  tags: string[];
}

const data: Data[] = [{ id: 1, tags: ['a', 'b'] }];
// filter создаёт новый массив, но объекты внутри остаются ссылками
const filtered = data.filter(item => item.id !== 1);
// filtered[0] === data[0] // true, если бы элемент не был удалён