The main purpose of splice() is to insert items into the middle of an array, but there are three distinct ways of using this method.
Operation Deletion | How Any number of items can be deleted from the array by specifying just two arguments: the position of the first item to delete and the number of items to delete. For example, splice(0, 2) deletes the first two items. |
---|---|
Insertion | Items can be inserted into a specific position by providing three or more arguments: the starting position, 0 (the number of items to delete), and the item to insert. Optionally, you can specify a fourth parameter, fifth parameter, or any number of other parameters to insert. For example, splice(2, 0, "red", "green") inserts the strings "red" and "green" into the array at position 2. |
Replacement | Items can be inserted into a specific position while simultaneously deleting items, if you specify three arguments: the starting position, the number of items to delete, and any number of items to insert. The number of items to insert doesn't have to match the number of items to delete. For example, splice(2, 1, "red", "green") deletes one item at position 2 and then inserts the strings "red" and "green" into the array at position 2. |
The splice() method always returns an array that contains any items that were removed from the array.
These three cases are illustrated in the following code:
var colors = ["red", "green", "blue"]; var removed = colors.splice(0,1); //remove the first item console.log(colors); //green,blue console.log(removed); //red - one item array removed = colors.splice(1, 0, "yellow", "orange"); //insert two items at position 1 console.log(colors); //green,yellow,orange,blue console.log(removed); //empty array removed = colors.splice(1, 1, "red", "purple"); //insert two values, remove one console.log(colors); //green,red,purple,orange,blue console.log(removed); //yellow - one item array