Thursday 23 November 2017

Remove empty elements from an array in Javascript

itemprop="text">


How do I remove empty
elements from an array in JavaScript?



Is there
a straightforward way, or do I need to loop through it and remove them
manually?



Answer




EDIT: This
question was answered almost nine years ago when there were not many useful built-in
methods in the
Array.prototype.



Now,
certainly, I would recommend you to use the filter
method.



Take in mind that this method will
return you a new array with the elements that pass the criteria of
the callback function you provide to
it.




For example, if you want to
remove null or undefined values:



data-console="true" data-babel="false">
class="snippet-code">
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);





It
will depend on what you consider to be "empty" for example, if you were dealing with
strings, the above function wouldn't remove elements that are an empty
string.



One typical pattern that I see often
used is to remove elements that are falsy, which include an empty
string "", 0,
NaN, null,
undefined, and
false.




You
can pass to the filter method, the
Boolean constructor function, or return the same element in the
filter criteria function, for
example:



var filtered =
array.filter(Boolean);


Or



var
filtered = array.filter(function(el) { return el;
});



In both
ways, this works because the filter method in the first case,
calls the Boolean constructor as a function, converting the
value, and in the second case, the filter method internally
turns the return value of the callback implicitly to
Boolean.



If you are
working with sparse arrays, and you are trying to get rid of the "holes", you can use
the filter method passing a callback that returns true, for
example:



data-hide="false" data-console="true" data-babel="false">
class="snippet-code">
var sparseArray = [0, , , 1, , , , , 2, , , ,
3],
cleanArray = sparseArray.filter(function () { return true
});

console.log(cleanArray); // [ 0, 1, 2, 3
]






Old
answer:
Don't do this!



I use this
method, extending the native Array
prototype:



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);


Or
you can simply push the existing elements into other
array:



// 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,,,,]);

No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...