如何在 JavaScript 中从数组中删除空元素？
有没有直接的方法，还是我需要循环并手动删除它们？
【问题讨论】：
var a = [,,] 和 var a = [undefined, undefined] 得到的结果有所不同。前者确实是空的，但后者实际上有两个键，但带有undefined 值。
null/undefined。例如，如果您的nulls 来自另一个数组的映射，map 函数为某些元素返回null，请在运行映射之前尝试Array.filter 输出这些元素。使您的代码更具可读性/自记录性。显然，这并不适用于所有用例，但可以应用到很多地方。
标签： javascript arrays
试试这个。将您的数组传递给它，它将返回并删除空元素。 *已更新以解决 Jason 指出的错误
function removeEmptyElem(ary) {
for (var i = ary.length - 1; i >= 0; i--) {
if (ary[i] == undefined) {
ary.splice(i, 1);
}
}
return ary;
}
【讨论】：
您可能会发现循环遍历数组并从数组中保留的项目中构建一个新数组比尝试循环和拼接更容易，因为修改数组的长度同时它被循环可能会带来问题。
你可以这样做：
function removeFalsyElementsFromArray(someArray) {
var newArray = [];
for(var index = 0; index < someArray.length; index++) {
if(someArray[index]) {
newArray.push(someArray[index]);
}
}
return newArray;
}
其实这里有一个更通用的解决方案：
function removeElementsFromArray(someArray, filter) {
var newArray = [];
for(var index = 0; index < someArray.length; index++) {
if(filter(someArray[index]) == false) {
newArray.push(someArray[index]);
}
}
return newArray;
}
// then provide one or more filter functions that will
// filter out the elements based on some condition:
function isNullOrUndefined(item) {
return (item == null || typeof(item) == "undefined");
}
// then call the function like this:
var myArray = [1,2,,3,,3,,,,,,4,,4,,5,,6,,,,];
var results = removeElementsFromArray(myArray, isNullOrUndefined);
// results == [1,2,3,3,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原型：
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);
或者您可以简单地将现有元素推送到其他数组中：
// Will remove all falsy values: undefined, null, 0, false, NaN and "" (empty string)
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,,,,]);
【讨论】：
splice 调用在旧浏览器上真的成本很高，因为它们必须重新编号所有数组键以缩小差距。
Object.defineProperty 扩展Array.prototype 以使新函数成为不可枚举的属性然后避免在每个循环中放置.hasOwnProperty 造成的性能损失。
如果你有 Javascript 1.6 或更高版本，你可以使用Array.filter 使用一个简单的return true 回调函数，例如：
arr = arr.filter(function() { return true; });
因为.filter 会自动跳过原始数组中缺失的元素。
上面链接的 MDN 页面还包含一个很好的错误检查版本 filter，可用于不支持官方版本的 JavaScript 解释器。
请注意，这不会删除 null 条目，也不会删除具有显式 undefined 值的条目，但 OP 明确要求“丢失”条目。
【讨论】：
undefined 作为其给定值的键的情况。
这个可行，我在AppJet测试过（你可以复制粘贴代码到它的IDE上然后按“重新加载”来查看它的工作，不需要创建帐户）
/* appjet:version 0.1 */
function Joes_remove(someArray) {
var newArray = [];
var element;
for( element in someArray){
if(someArray[element]!=undefined ) {
newArray.push(someArray[element]);
}
}
return newArray;
}
var myArray2 = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];
print("Original array:", myArray2);
print("Clenased array:", Joes_remove(myArray2) );
/*
Returns: [1,2,3,3,0,4,4,5,6]
*/
【讨论】：
for ... in 枚举键的行为实际上导致了丢失元素的跳过。 undefined 的测试仅用于删除显式设置为该值的真实元素。
@Alnitak
如果您添加一些额外的代码，实际上 Array.filter 适用于所有浏览器。见下文。
var array = ["","one",0,"",null,0,1,2,4,"two"];
function isempty(x){
if(x!=="")
return true;
}
var res = array.filter(isempty);
document.writeln(res.toJSONString());
// gives: ["one",0,null,0,1,2,4,"two"]
这是你需要为IE添加的代码，但是过滤器和函数式编程值得imo。
//This prototype is provided by the Mozilla foundation and
//is distributed under the MIT license.
//http://www.ibiblio.org/pub/Linux/LICENSES/mit.license
if (!Array.prototype.filter)
{
Array.prototype.filter = function(fun /*, thisp*/)
{
var len = this.length;
if (typeof fun != "function")
throw new TypeError();
var res = new Array();
var thisp = arguments[1];
for (var i = 0; i < len; i++)
{
if (i in this)
{
var val = this[i]; // in case fun mutates this
if (fun.call(thisp, val, i, this))
res.push(val);
}
}
return res;
};
}
【讨论】：
用正则表达式过滤掉无效条目
array = array.filter(/\w/);
filter + regexp
【讨论】：
"----"（带有非单词字符的字符串）这样的合法值。
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]
或 -（仅适用于 单个“文本”类型的数组项）
['','1','2',3,,'4',,undefined,,,'5'].join('').split('');
// output: ["1","2","3","4","5"]
或 - 经典方式：简单迭代
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]); // copy non-empty values to the end of the array
arr.splice(0 , len); // cut the array and leave only the non-empty values
arr // [1,2,3,3,[],Object{},5,6]
var arr = [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,];
arr = $.grep(arr,function(n){ return n == 0 || n });
arr // [1, 2, 3, 3, 0, 4, 4, 5, 6]
var arr = [1,2,null, undefined,3,,3,,,0,,,4,,4,,5,,6,,,,],
temp = [];
for(let i of arr)
i && temp.push(i); // copy each non-empty value to the 'temp' array
arr = temp;
arr // [1, 2, 3, 3, 4, 4, 5, 6]
['foo', '',,,'',,null, ' ', 3, true, [], [1], {}, undefined, ()=>{}].filter(String)
// ["foo", null, " ", 3, true, [1], Object {}, undefined, ()=>{}]
【讨论】：
arr = arr.filter(function(n){return n; });
foo.join("").split("") 似乎只有在字符串是单个字符时才有效
arr.filter(e=>e) 并且可以通过 map、reduce 等链接。
那又怎样：
js> [1,2,,3,,3,,,0,,,4,,4,,5,,6,,,,].filter(String).join(',')
1,2,3,3,0,4,4,5,6
【讨论】：
干净的方法。
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"]
【讨论】：
undefined；这基本上删除了所有虚假值。
如果您需要删除所有空值（“”、null、未定义和 0）：
arr = arr.filter(function(e){return e});
要删除空值和换行符：
arr = arr.filter(function(e){ return e.replace(/(\r\n|\n|\r)/gm,"")});
例子：
arr = ["hello",0,"",null,undefined,1,100," "]
arr.filter(function(e){return e});
返回：
["hello", 1, 100, " "]
更新（基于 Alnitak 的评论）
在某些情况下，您可能希望在数组中保留“0”并删除其他任何内容（null、未定义和“”），这是一种方法：
arr.filter(function(e){ return e === 0 || e });
返回：
["hello", 0, 1, 100, " "]
【讨论】：
function(e){return !!e}
!!e 将包括 NaN（与 0 不同）而 e 将不包括（如 0）。
var myarr=[1, 2,, 3,, 3,undefined,,"",,0, 4,, 4,, 5,, 6,,,,].filter(Boolean); 删除 undefined,"" 和 0
如果使用库是一种选择，我知道 underscore.js 有一个名为 compact() http://documentcloud.github.com/underscore/ 的函数，它还有其他几个与数组和集合相关的有用函数。
这是他们文档的摘录：
_.compact(数组)
返回删除所有虚假值的数组副本。在 JavaScript 中，false、null、0、""、undefined 和 NaN 都是 falsy。
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
【讨论】：
我需要做同样的任务并遇到了这个线程。我最终使用数组“join”创建了一个使用“_”分隔符的字符串，然后做了一些正则表达式：-
1. replace "__" or more with just one "_",
2. replace preceding "_" with nothing "" and similarly
3. replace and ending "_" with nothing ""
...然后使用数组“拆分”来制作一个清理后的数组：-
var myArr = new Array("","","a","b","","c","","","","","","","","","e","");
var myStr = "";
myStr = myArr.join("_");
myStr = myStr.replace(new RegExp(/__*/g),"_");
myStr = myStr.replace(new RegExp(/^_/i),"");
myStr = myStr.replace(new RegExp(/_$/i),"");
myArr = myStr.split("_");
alert("myArr=" + myArr.join(","));
...或在 1 行代码中：-
var myArr = new Array("","","a","b","","c","","","","","","","","","e","");
myArr = myArr.join("_").replace(new RegExp(/__*/g),"_").replace(new RegExp(/^_/i),"").replace(new RegExp(/_$/i),"").split("_");
alert("myArr=" + myArr.join(","));
...或者，扩展 Array 对象：-
Array.prototype.clean = function() {
return this.join("_").replace(new RegExp(/__*/g),"_").replace(new RegExp(/^_/i),"").replace(new RegExp(/_$/i),"").split("_");
};
var myArr = new Array("","","a","b","","c","","","","","","","","","e","");
alert("myArr=" + myArr.clean().join(","));
【讨论】：
我只是将我的声音添加到上面的“使用全局构造函数调用 ES5 的 Array..filter()”golf-hack，但我建议使用 Object 而不是 String、Boolean 或 Number以上建议。
具体来说，ES5 的filter() 已经不会为数组中的undefined 元素触发；所以一个普遍返回true的函数，它返回所有元素filter()命中，必然只返回非undefined元素：
> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(function(){return true})
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]
但是，写出...(function(){return true;}) 比写出...(Object) 长；在任何情况下，Object 构造函数的返回值将是某种对象。与上面建议的原始装箱构造函数不同，没有可能的对象值是错误的，因此在布尔设置中，Object 是function(){return true} 的简写。
> [1,,5,6,772,5,24,5,'abc',function(){},1,5,,3].filter(Object)
[1, 5, 6, 772, 5, 24, 5, 'abc', function (){}, 1, 5, 3]
【讨论】：
someArray.filter(String); 实际上等同于someArray.filter(function(x){ return String(x); });。如果要删除所有虚假值，someArray.filter(Boolean); 可以删除 0、-0、NaN、false、''、null 和 undefined。
Object 构造函数而不是 return true 方法的性能开销。 @robocat OP 要求删除空元素，而不是空元素。
带下划线/Lodash：
一般用例：
_.without(array, emptyVal, otherEmptyVal);
_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
有空瓶：
_.without(['foo', 'bar', '', 'baz', '', '', 'foobar'], '');
--> ["foo", "bar", "baz", "foobar"]
【讨论】：
只需一个班轮：
[1, false, "", undefined, 2].filter(Boolean); // [1, 2]
或使用underscorejs.org:
_.filter([1, false, "", undefined, 2], Boolean); // [1, 2]
// or even:
_.compact([1, false, "", undefined, 2]); // [1, 2]
【讨论】：
Boolean 作为一个函数......
Boolean 视为一个函数，它将简单地返回true 或false，无论该值是否为真/假。
(true).constructor === Boolean。然后告诉我我们是否可以使用 JS 中的其他内置插件来做到这一点。 ;)) （当然排除了其他 5 个内置构造函数。（字符串、数组、对象、函数、数字））
另一种方法是利用数组的长度属性：将非空项打包在数组的“左侧”，然后减小长度。 它是一种就地算法 - 不分配内存，对垃圾收集器来说太糟糕了 - 并且它具有非常好的最佳/平均/最坏情况行为。
与此处的其他解决方案相比，此解决方案在 Chrome 上的速度要快 2 到 50 倍，在 Firefox 上要快 5 到 50 倍，您可能会在此处看到：http://jsperf.com/remove-null-items-from-array
下面的代码将不可枚举的 'removeNull' 方法添加到 Array 中，该方法返回 'this' 用于菊花链：
var removeNull = function() {
var nullCount = 0 ;
var length = this.length ;
for (var i=0, len=this.length; i<len; i++) { if (!this[i]) {nullCount++} }
// no item is null
if (!nullCount) { return this}
// all items are null
if (nullCount == length) { this.length = 0; return this }
// mix of null // non-null
var idest=0, isrc=length-1;
length -= nullCount ;
while (true) {
// find a non null (source) slot on the right
while (!this[isrc]) { isrc--; nullCount--; }
if (!nullCount) { break } // break if found all null
// find one null slot on the left (destination)
while ( this[idest]) { idest++ }
// perform copy
this[idest]=this[isrc];
if (!(--nullCount)) {break}
idest++; isrc --;
}
this.length=length;
return this;
};
Object.defineProperty(Array.prototype, 'removeNull',
{ value : removeNull, writable : true, configurable : true } ) ;
【讨论】：
arr.filter(e => e)。
smart的定义——比如动词，会引起剧烈的刺痛。如果我因您的评论而将手机武器化，这与身体疼痛有关。
不错...非常不错 我们也可以像这样替换所有数组值
Array.prototype.ReplaceAllValues = function(OldValue,newValue)
{
for( var i = 0; i < this.length; i++ )
{
if( this[i] == OldValue )
{
this[i] = newValue;
}
}
};
【讨论】：
foo = [0, 1, 2, "", , false, 3, "four", null]
foo.filter(function(e) {
return e === 0 ? '0' : e
})
退货
[0, 1, 2, 3, "four"]
【讨论】：
当使用上面投票最高的答案时，第一个例子，我得到字符串长度大于 1 的单个字符。下面是我解决这个问题的方法。
var stringObject = ["", "some string yay", "", "", "Other string yay"];
stringObject = stringObject.filter(function(n){ return n.length > 0});
如果未定义则不返回，如果长度大于 0 则返回。希望对那里的人有所帮助。
退货
["some string yay", "Other string yay"]
【讨论】：
["", "some string yay", "", "", 123, "Other string yay"].filter(function(n){ return n.length > 0}) //gives your same result removing 123 替换该函数...具有讽刺意味的是，将数字留在其中，但会在给定数组中给出相同的结果。
这是另一种方法：
var arr = ["a", "b", undefined, undefined, "e", undefined, "g", undefined, "i", "", "k"]
var cleanArr = arr.join('.').split(/\.+/);
【讨论】：
由于没有其他人提及它并且大多数人在他们的项目中包含下划线，您也可以使用_.without(array, *values);。
_.without(["text", "string", null, null, null, "text"], null)
// => ["text", "string", "text"]
【讨论】：
这是一个使用可变参数行为和 ES2015 粗箭头表达式的示例：
Array.prototype.clean = function() {
var args = [].slice.call(arguments);
return this.filter(item => args.indexOf(item) === -1);
};
// Usage
var arr = ["", undefined, 3, "yes", undefined, undefined, ""];
arr.clean(undefined); // ["", 3, "yes", ""];
arr.clean(undefined, ""); // [3, "yes"];
【讨论】：
这个（ES6）怎么样：从数组中删除 Falsy 值。
var arr = [0,1,2,"test","false",false,true,null,3,4,undefined,5,"end"];
arr.filter((v) => (!!(v)==true));
//output:
//[1, 2, "test", "false", true, 3, 4, 5, "end"]
【讨论】：
删除空元素的最佳方法是使用Array.prototype.filter()，正如其他答案中已经提到的那样。
很遗憾，IEArray.prototype.filter()。如果您仍然需要支持 IE8 或更旧版本的 IE，您可以使用以下 polyfill 在这些浏览器中添加对 Array.prototype.filter() 的支持：
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
【讨论】：
'滥用' for ... in (object-member) 循环。 => 只有真值出现在循环体中。
// --- Example ----------
var field = [];
field[0] = 'One';
field[1] = 1;
field[3] = true;
field[5] = 43.68;
field[7] = 'theLastElement';
// --- Example ----------
var originalLength;
// Store the length of the array.
originalLength = field.length;
for (var i in field) {
// Attach the truthy values upon the end of the array.
field.push(field[i]);
}
// Delete the original range within the array so that
// only the new elements are preserved.
field.splice(0, originalLength);
【讨论】：
for ... in 的行为是从数组中删除未定义键的原因，但实际上您这里没有代码可以仅接受“真实”值
这样做怎么样
// Removes all falsy values
arr = arr.filter(function(array_val) { // creates an anonymous filter func
var x = Boolean(array_val); // checks if val is null
return x == true; // returns val to array if not null
});
【讨论】：
如果有人想清理整个数组或对象，这可能会有所帮助。
var qwerty = {
test1: null,
test2: 'somestring',
test3: 3,
test4: {},
test5: {
foo: "bar"
},
test6: "",
test7: undefined,
test8: " ",
test9: true,
test10: [],
test11: ["77","88"],
test12: {
foo: "foo",
bar: {
foo: "q",
bar: {
foo:4,
bar:{}
}
},
bob: {}
}
}
var asdfg = [,,"", " ", "yyyy", 78, null, undefined,true, {}, {x:6}, [], [2,3,5]];
function clean_data(obj) {
for (var key in obj) {
// Delete null, undefined, "", " "
if (obj[key] === null || obj[key] === undefined || obj[key] === "" || obj[key] === " ") {
delete obj[key];
}
// Delete empty object
// Note : typeof Array is also object
if (typeof obj[key] === 'object' && Object.keys(obj[key]).length <= 0) {
delete obj[key];
}
// If non empty object call function again
if(typeof obj[key] === 'object'){
clean_data(obj[key]);
}
}
return obj;
}
var objData = clean_data(qwerty);
console.log(objData);
var arrayData = clean_data(asdfg);
console.log(arrayData);
输出：
删除 null、undefined、""、" "、empty object 或 empty array 的任何内容
jsfiddle here
【讨论】：
这个只会删除空值，不会删除假值，我认为这是更可取的。
还有一个选项可以删除空值。
这种方法应该比使用拼接要快很多。
function cleanArray(a, removeNull) {
var i, l, temp = [];
l = a.length;
if (removeNull) {
for (i = 0; i < l; i++) {
if (a[i] !== undefined && a[i] !== null) {
temp.push(a[i]);
}
}
} else {
for (i = 0; i < l; i++) {
if (a[i] !== undefined) {
temp.push(a[i]);
}
}
}
a.length = 0;
l = temp.length;
for (i = 0; i < l; i++) {
a[i] = temp[i];
}
temp.length = 0;
return a;
}
var myArray = [1, 2, , 3, , 3, , , 0, , null, false, , NaN, '', 4, , 4, , 5, , 6, , , , ];
cleanArray(myArray);
myArray;
【讨论】：
简单的 ES6
['a','b','',,,'w','b'].filter(v => v);
【讨论】：
[1, 'two', null, undefined, , NaN, false, true, 0].filter(v => v).