Remove an Item From an Array with JavaScript
Written by David Walsh on February 6, 2013 · 9 Comments
One operation that seems to be more difficult than it should be in every programming language is removing a value from an array. It's such an easy concept mentally that it skews our programmatic view of the task. In JavaScript the splice method is of huge help in removing an item from an array.
JavaScript Splice
One splice coupled with an indexOf removes the item from an array:
// Start with an initial array
var array = ["a", "b", "c"];
// Find and remove item from an array
var i = array.indexOf("b");
if(i != -1) {
array.splice(i, 1);
}
Of course if you'd like to remove multiple occurrences of the same string/number, you'll need add a bit more logic:
for(var i = array.length-1; i--;){
if (array[i] === "b") array.splice(i, 1);
}
You may be thinking that the filter method would work...
array.filter(function(i) {
return i != "b"
});
...but that will return a new array, thus not modifying the original.
Removing a given value from an array isn't too difficult of a task when you have a reliable snippet nearby!
It’s important to note that splicing an array is an incredibly slow operation and is very difficult or impossible for engines to optimize. If you have performance sensitive uses of collections of items that need to be mutated at arbitrary points then you’ll likely want to look into alternative data structure implementations. Two new ones being introduced as base language features in ES6 are Map and Set, which force uniqueness but also allow for linear time item deletions. While these features only exist in Spidermonkey and V8 behind a flag, there are shims available and they will eventually be in all engines.
Awesome tip Brandon, thank you!
Oops, quick correction. That’s *constant* time, not *linear* time.
nit: you start out looking past the end of the array. I think you want array.length-1.
I haven’t benchmarked, but if you’re expecting to remove a lot of elements, it might be faster to do something like:
for (var i = 0, j = 0; i < array.length; i++) {
if (array[i] != "b")
array[j++] = array[i];
}
array.length = j;
I don’t know how much is “a lot” of elements, but your code (although nice) doesn’t seem to be very fast… At least, not faster than .splice:
http://jsperf.com/removing-items-from-array
In this case I’m just trying to remove 10% of the elements, maybe with a higher ratio the scenario would be different.
I’m quite surprised by those results, Steve’s version should be faster than shifting all elements back one index each splice. I guess splice must have a clever implementation in the other browsers and Firefox 21 just has a beast JS interpreter :P
indexOf doesn’t work on array in IE :(
It does in IE9+.
For IE8- there are common shims, but I guess you already know that.
Your location is valueble for me. Thanks!
christian louboutin outlets