Убрать пустые элементы из массива в JavaScript
Как удалить пустые элементы из массива в JavaScript?
Существует ли простой способ сделать это, или мне придется проходить по массиву и удалять их вручную?
5 ответ(ов)
Несколько простых способов:
var arr = [1, 2, , 3, , -3, null, , 0, , undefined, 4, , 4, , 5, , 6, , , , ,];
arr.filter(n => n)
// [1, 2, 3, -3, 4, 4, 5, 6]
arr.filter(Number)
// [1, 2, 3, -3, 4, 4, 5, 6]
arr.filter(Boolean)
// [1, 2, 3, -3, 4, 4, 5, 6]
или - классический способ: простая итерация
var arr = [1, 2, null, undefined, 3, , 3, , , 0, , , [], , {}, , 5, , 6, , , , ,],
len = arr.length, i;
for (i = 0; i < len; i++)
arr[i] && arr.push(arr[i]); // копируем непустые значения в конец массива
arr.splice(0, len); // обрезаем массив, оставляя только непустые значения
// [1, 2, 3, 3, [], Object{}, 5, 6]
jQuery:
var arr = [1, 2, , 3, , 3, , , 0, , , 4, , 4, , 5, , 6, , , , ,];
arr = $.grep(arr, n => n == 0 || n);
// [1, 2, 3, 3, 0, 4, 4, 5, 6]
Редактировать: Этот вопрос был задан почти девять лет назад, когда в Array.prototype
не было так много полезных встроенных методов.
Теперь я определенно рекомендую использовать метод filter
.
Учтите, что этот метод вернет вам новый массив с элементами, которые соответствуют критериям, заданным в предоставленной вами функции обратного вызова.
Например, если вы хотите удалить значения null
или undefined
:
var array = [0, 1, null, 2, "", 3, undefined, 3,,,,,, 4,, 4,, 5,, 6,,,,];
var filtered = array.filter(function (el) {
return el != null;
});
console.log(filtered);
Это будет зависеть от того, что вы считаете "пустым". Например, если вы работаете со строками, приведенная выше функция не удалит элементы, которые являются пустыми строками.
Одним из типичных паттернов, которые я часто наблюдаю, является удаление элементов, которые являются ложными (falsy), включая пустую строку ""
, 0
, NaN
, null
, undefined
и false
.
Вы можете передавать в метод filter
функцию конструктора Boolean
или же возвращать сам элемент в функции фильтрации, например:
var filtered = array.filter(Boolean);
Или
var filtered = array.filter(function(el) { return el; });
В обоих случаях это работает, потому что в первом случае метод filter
вызывает конструктор Boolean
как функцию, преобразуя значение, а во втором случае метод filter
внутри себя неявно преобразует возвращаемое значение обратного вызова в Boolean
.
Если вы работаете с разреженными массивами и пытаетесь избавиться от "пустот", вы можете использовать метод filter
, передав ему обратный вызов, который всегда возвращает true, например:
var sparseArray = [0, , , 1, , , , , 2, , , , 3],
cleanArray = sparseArray.filter(function () { return true });
console.log(cleanArray); // [ 0, 1, 2, 3 ]
Старый ответ: Не делайте этого!
Я использую этот метод, расширяя нативный прототип массива:
Array.prototype.clean = function(deleteValue) {
for (var i = 0; i < this.length; i++) {
if (this[i] == deleteValue) {
this.splice(i, 1);
i--;
}
}
return this;
};
test = new Array("", "One", "Two", "", "Three", "", "Four").clean("");
test2 = [1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,];
test2.clean(undefined);
Или вы можете просто добавить существующие элементы в другой массив:
// Удалит все ложные значения: undefined, null, 0, false, NaN и "" (пустую строку)
function cleanArray(actual) {
var newArray = new Array();
for (var i = 0; i < actual.length; i++) {
if (actual[i]) {
newArray.push(actual[i]);
}
}
return newArray;
}
cleanArray([1, 2,, 3,, 3,,,,,, 4,, 4,, 5,, 6,,,,]);
Если вам нужно удалить все пустые значения ("" , null, undefined и 0), вы можете использовать метод filter
следующим образом:
arr = arr.filter(function(e) { return e });
Для удаления пустых значений и символов переноса строки (Line breaks) вы можете использовать следующий код:
arr = arr.filter(function(e) { return e.replace(/(\r\n|\n|\r)/gm, ""); });
Вот пример использования:
arr = ["hello", 0, "", null, undefined, 1, 100, " "];
arr = arr.filter(function(e) { return e });
Результат:
["hello", 1, 100, " "]
ОбНОВЛЕНИЕ (основано на комментарии Alnitak)
В некоторых случаях вам может потребоваться оставить "0" в массиве и удалить все остальные значения (null, undefined и ""), в этом случае вы можете использовать такой подход:
arr = arr.filter(function(e) { return e === 0 || e });
Результат будет следующим:
["hello", 0, 1, 100, " "]
Для удаления "дырок" в массивах можно использовать следующий код:
arr.filter(() => true);
arr.flat(0); // Новинка в ES2019
Чтобы удалить "дыры", null и undefined:
arr.filter(x => x != null);
Для удаления "дыр", а также ложных (null, undefined, 0, -0, 0n, NaN, "", false) значений:
arr.filter(x => x);
Пример использования:
arr = [, null, (void 0), 0, -0, 0n, NaN, false, '', 42];
console.log(arr.filter(() => true)); // [null, (void 0), 0, -0, 0n, NaN, false, '', 42]
console.log(arr.filter(x => x != null)); // [0, -0, 0n, NaN, false, "", 42]
console.log(arr.filter(x => x)); // [42]
Примечание:
- "Дыры" — это индексы массива, которые не содержат элементов.
arr = [, ,];
console.log(arr[0], 0 in arr, arr.length); // undefined, false, 2; arr[0] - это дыра
arr[42] = 42;
console.log(arr[10], 10 in arr, arr.length); // undefined, false, 43; arr[10] - это дыра
arr1 = [1, 2, 3];
arr1[0] = (void 0);
console.log(arr1[0], 0 in arr1); // undefined, true; a[0] - это undefined, а не дыра
arr2 = [1, 2, 3];
delete arr2[0]; // НИКОГДА так не делайте
console.log(arr2[0], 0 in arr2, arr2.length); // undefined, false; a[0] - это дыра
- Все вышеупомянутые методы возвращают копию заданного массива, не изменяя его на месте.
arr = [1, 3, null, 4];
filtered = arr.filter(x => x != null);
console.log(filtered); // [1, 3, 4]
console.log(arr); // [1, 3, null, 4]; не изменён
Самый чистый способ сделать это — использовать метод filter
с конструктором Boolean
в качестве колбэка. Это позволит вам отфильтровать все "ложные" значения из массива. Вот пример:
var arr = [0, 1, 2, "Thomas", "false", false, true, null, 3, 4, undefined, 5, "end"];
arr = arr.filter(Boolean);
// Результат: [1, 2, "Thomas", "false", true, 3, 4, 5, "end"]
В этом коде filter(Boolean)
удаляет все значения, которые приводятся к false
, включая 0
, false
, null
, undefined
, и т. д. Таким образом, в массив остаются только "истинные" значения.
Как перемешать (сделать случайным) массив в JavaScript?
Как объединить два массива в JavaScript и удалить дубликаты?
Как очистить массив в JavaScript?
Как удалить все дубликаты из массива объектов?
Выбор последнего элемента в массиве JavaScript