JavaScript splice() Method
This tutorial teaches you the splice() method, part of JavaScript's Array object. splice() is one one JavaScript's most powerful array manipulation method, which actually supersedes the functionality of related array methods. The splice() method lets you perform element insertion and extraction on the array itself.
Related array methods:
unshift() inserts elements to the start of an array.
push() inserts elements to the end of an array.
shift() removes the first element of an array.
pop() removes the last element of an array.
splice() Method Syntax
The splice() method takes at least two integer arguments, each greater than or equal to zero (<=0
). The first argument specifies the index at which to start removing and/or inserting elements on the original array.
The second argument determines how many elements will be deleted. To insert elements without deleting any, simply pass zero as second argument.
Array.splice(2,3); // Removes 3 elements starting at Array[2]
The splice() method returns an array containing the elements it removed from the original array. An empty array is returned if no elements were removed.
Using the splice() Method to Remove Array Elements
The script below removes array elements, and displays the splice() method's return value, and the original array. (We use the join() method to display all original array elements separated by a space.)
var arlene = ["I","am","thrilled","to","learn","JavaScript"];
// Use the splice() method to remove three elements
alert( arlene.splice(2,3).toString() +"\n"+ arlene.join(" ") );
The splice() method above will delete 3 elements from our original array, starting with the third element (Array[2]). Our alert's first line displays the removed elements, returned by splice(); the second line displays our modified original array, with its elements joined by a space character.
Using the splice() Method to Add Array Elements
Used with only two arguments, the splice() method removes array elements. Additional arguments will be inserted in the original array. The script below re-uses our example, but adds a new element without removing any.
var arlene = ["I","am","thrilled","to","learn","JavaScript"];
// Remove zero element, insert a new one
arlene.splice(2,0,"very");
alert( arlene.join(" ") );
By supplying zero as second argument, no array element is removed by the splice() method. The third argument, a string, is added at position 2 (that is, as third element) in the original array.
The join() method concatenates our resulting array's elements with a space.
Using the splice() method to Substitute Array Elements
When used with more than two arguments, the splice() method puts new elements in place of those deleted. In the example above, we deleted zero element, and added (interpolated) a new element.
In the script below, we delete some elements and add a new one: we are, in effect, substituting elements we remove by new ones.
var arlene = ["I","am","thrilled","to","learn","JavaScript"];
// Remove three elements, insert a new one
arlene.splice(2,3,"learning");
alert( arlene.join(" ") );
Our JavaScript alert confirms that three elements ("thrilled", "to", "learn") have been removed by the splice() method, and replaced by "learning".
Test the splice() Method
Interactively test the splice() method by editing the JavaScript code below and clicking the Test splice() Method button.
Browser support for JavaScript splice() method | |||
---|---|---|---|