Как удалить пустую строку из массива в JS (JavaScript)

В этом руководстве давайте рассмотрим, как удалить пустую строку из массива в (JS) JavaScript.

Массив — это набор данных, которые могут быть однородными (одного типа) или разнородными (смешанные типы). Предположим, имеется массив строк, некоторые из которых пустые. Они не содержат значения, поэтому их удаление не повлияет на массив с точки зрения его общего значения. Как решить эту проблему?

Метод filter()

Самый простой способ удалить пустые строки из массива — метод filter. Его можно применять для фильтрации элементов в массиве, соответствующих заданному условию.

Для этого выполняется итерация по массиву, и для каждой из них значение текущего элемента будет сохраняться во временной переменной. Затем позже её можно использовать для манипулирования результатом. Этот метод не изменяет значение исходного массива, но возвращает новый массив с отфильтрованными значениями.

Итак, если мы зададим условие в виде fruit != для каждой итерации. То есть, если отфильтровать значения, которые не являются пустой строкой, получится новый массив. Он будет полностью состоять из непустых строковых значений.

Теперь можно переназначить новый массив исходной переменной fruits. Это эффективно удалит пустые строки из массива, как показано ниже.

let fruits = ['Grapes', '', 'Apples', 'Oranges', '', 'Banana', ''];
fruits = fruits.filter((fruit => fruit !== ''));
console.log(fruits); // ['Grapes', 'Apples', 'Oranges', 'Banana']

Как удалить пустую строку из массива методом map()

Он работает аналогично предыдущему методу и выполняет итерации по массиву. Для каждой итерации текущее значение будет сохраняться во временной переменной (fruit в нашем случае). Но в отличие от использования метода filter с помощью map можно выполнить некоторые вычисления с текущим значением. В примере ниже осуществляется проверка, является ли текущее значение fruit пустой строкой. Если это не так, то переносим его в массив newFruits.

Как только метод map завершит итерацию по массиву, переменная newFruits будет содержать отфильтрованную версию массива fruits.

let fruits = ['Grapes', '', 'Apples', 'Oranges', '', 'Banana', ''];
let newFruits = [];
fruits.map(fruit => {
    if(fruit !== '') {
        newFruits.push(fruit);
    }
});
console.log(newFruits); // ['Grapes', 'Apples', 'Oranges', 'Banana']

Метод reduce()

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

Точно так же, как и в методе map, для каждой итерации можно проверять, является ли текущее значение пустой строкой, и вставлять непустые.

Основное различие между map и reduce заключается в том, что в этом случае не требуется создавать новый массив. Он формируется методом, потому потребуется временная переменная, которая будет хранить совокупный результат.

Как это работает:

1. В нашем примере newFruits сохранит совокупный результат (непустые значения в формате массива), а fruit будет содержать текущее значение итерации.
2. Можно просто перенести непустые значения в newFruits, если условие совпадает на текущей итерации. Затем метод возвращает массив newFruits для замены массива в переменной fruits.

let fruits = ['Grapes', '', 'Apples', 'Oranges', '', 'Banana', ''];
fruits = fruits.reduce((newFruits,fruit) => {
    if(fruit !== '') {
        newFruits.push(fruit);
    }
    return newFruits;
}, []);
console.log(fruits); // ['Grapes', 'Apples', 'Oranges', 'Banana']

Как удалить пустую строку из массива через циклы и новый массив

Вместо использования методов высокого порядка с массивами, можно применить старые добрые циклы for и while, чтобы получить тот же результат:

1. Как показано ниже, необходимо создать новую переменную newFruits и для начала назначить ей пустой массив.
2. Затем следует создать цикл for (или while), который повторяет длину массива.
3. На каждой итерации следует проверять, не является ли fruits[i] (текущее значение) пустой строкой.
4. Если он не содержит пустую строку, вставляем его в массив newFruits.

let fruits = ['Grapes', '', 'Apples', 'Oranges', '', 'Banana', ''];
 
let newFruits = [];
 
for(let i = 0; i < fruits.length; i++) {
    if(fruits[i] !== '') {
        newFruits.push(fruits[i]);
    }
}
 
console.log(newFruits); // ['Grapes', 'Apples', 'Oranges', 'Banana']

Хотя приведённый выше пример был создан с использованием цикла for, можно вместо него использовать циклы while и do while.

Как удалить пустую строку из массива методами forEach() и splice()

Можно использовать методы forEach и splice вместе. Первый также выполняет итерацию по массиву, но в этом случае для каждой итерации можно получить индекс текущего элемента.

Итак, вместо того, чтобы просто создавать новый массив и вставлять в него элемент, потребуется метод splice для удаления недопустимых значений из исходного массива.

Вот как это происходит:

1. В этом примере осуществляется проверка, является ли элемент массива пустой строкой. Если это так, то его можно удалить методом splice.
2. Можно использовать индекс, который получается при каждой итерации, чтобы объединить массив по этому индексу. Метод splice требует два аргумента, первый — это позиция, из которой вы хотите удалить элементы массива (в нашем случае из index), а второй аргумент относится к количеству элементов, которые требуется удалить.
3. Если указать количество удаляемых элементов как 1. Элемент (значение), соответствующий индексу, будет удалён.

let fruits = ['Grapes', '', 'Apples', 'Oranges', '', 'Banana', ''];
 
fruits.forEach((fruit,index) => {
    if(fruit === '') {
        fruits.splice(index,1);
    }
});
 
console.log(fruits); // ['Grapes', 'Apples', 'Oranges', 'Banana']

Можно также использовать циклы for или while с методом splice для выполнения той же операции.

Читайте также: Как поменять элементы массива местами в JavaScript.

Метод sort()

По дефолту он может использоваться для сортировки массива в порядке возрастания. В случае со строками это означает, что пустые строки будут помещены в начало массива, поскольку их значение эквивалентно 0.

После завершения можете предпринять следующие шаги:

1. Проверить, является ли первое значение массива всё ещё пустой строкой при помощи цикла while.
2. Если это так, следует использовать метод shift, чтобы удалить первый элемент.
3. Таким способом удаляются все пустые элементы, поэтому fruits теперь будет иметь только непустые строковые значения.

let fruits = ['Grapes', '', 'Apples', 'Oranges', '', 'Banana', ''];
fruits.sort();
console.log(fruits); // ['', '', '', 'Apples', 'Banana', 'Grapes', 'Oranges']
 
while(fruits[0] === '') {
    fruits.shift();
}
 
console.log(fruits); // ['Grapes', 'Apples', 'Oranges', 'Banana']

Кроссбраузерность

Методы filter(), map(), reduce(), forEach(), splice() и sort() имеют полную поддержку браузерами.