Как удалить пустые элементы из массива в JavaScript?

Универсальное решение: фильтрация с проверкой на "пустоту"

Для удаления всех пустых, ложных и бессмысленных элементов из массива лучше всего использовать метод filter() с кастомной функцией проверки. Рассмотрим несколько подходов от простого к сложному.

1. Удаление всех "ложных" (falsy) значений

В JavaScript есть 6 falsy значений: false, 0, '' (пустая строка), null, undefined, NaN. Если вам нужно удалить их все, используйте:

const messyArray = ['apple', '', 'banana', null, 'cherry', undefined, 'date', '  ', false, 0];
const cleanArray = messyArray.filter(Boolean);
// Результат: ['apple', 'banana', 'cherry', 'date', '  ']

Boolean — это встроенная функция, которая преобразует значение в true/false. filter(Boolean) автоматически отбрасывает все falsy значения. Но! Обратите внимание: строка с пробелами ' ' осталась, потому что это truthy значение (непустая строка).

2. Удаление пустых строк и строк только из пробелов

Если нужно удалить ещё и строки, состоящие только из пробелов, добавьте проверку trim():

const cleanArray = messyArray.filter(item => {
    if (typeof item === 'string') {
        return item.trim() !== '';
    }
    return Boolean(item);
});
// Результат: ['apple', 'banana', 'cherry', 'date']

Здесь логика:

• Если элемент — строка, проверяем, не пустая ли она после удаления пробелов (trim())
• Если элемент не строка, используем Boolean(item) для отсеивания falsy значений

3. Самый жёсткий вариант — удалить ВСЁ, что не является "настоящим" значением

Допустим, вы хотите оставить только строки, числа и булевы значения, которые имеют смысл. Удалить null, undefined, пустые строки, строки из пробелов, NaN, но оставить 0 и false (если они нужны как данные):

const cleanArray = messyArray.filter(item => {
    // Удаляем null и undefined
    if (item === null || item === undefined) return false;
    // Удаляем NaN (единственное значение, которое не равно самому себе)
    if (typeof item === 'number' && isNaN(item)) return false;
    // Для строк — удаляем пустые и состоящие из пробелов
    if (typeof item === 'string' && item.trim() === '') return false;
    // Всё остальное оставляем
    return true;
});
// Результат: ['apple', 'banana', 'cherry', 'date', false, 0]

4. Если нужно удалить "пустые" элементы в буквальном смысле (дырки в массиве)

Иногда массив содержит "дырки" — элементы, которые не были присвоены:

const arr = ['a', , 'b', , 'c']; // Дырки на месте 1 и 3
const clean = arr.filter(() => true);
// Результат: ['a', 'b', 'c']

Метод filter() автоматически пропускает дырки в массиве. Даже если функция всегда возвращает true, пустые слоты не попадут в результат.

Итоговая рекомендация

Для 90% случаев используйте filter(Boolean) — это самое короткое и понятное решение. Если нужно удалить ещё и пробельные строки — добавляйте проверку с trim(). Всегда помните, что 0 и false — это falsy значения, и если они важны для ваших данных, их нужно обрабатывать отдельно.

const messyArray = ['apple', '', 'banana', null, 'cherry', undefined, 'date', '  ', false, 0];

const cleanArray = messyArray.reduce((acc, item) => {
    // Условие: элемент не пустой и не falsy (кроме 0 и false, если нужно)
    if (item !== null && item !== undefined && item !== '' && String(item).trim() !== '') {
        acc.push(item);
    }
    return acc;
}, []);
// Результат: ['apple', 'banana', 'cherry', 'date', false, 0]

const clean = arr.filter(x => x !== null && x !== undefined && x !== '');