Array splice()

In this chapter you will learn:

  1. How to use Javascript Array splice() function
  2. How to use Javascript Array splice() function to delete
  3. How to use Javascript Array splice() function to insert
  4. How to use Javascript Array splice() function to replace

Array splice()

splice() inserts items into the middle of an array. splice() can do three things to an array:Deletion, Insertion and Replacement

Deletion

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.

<!DOCTYPE html><!--   ja  v  a 2  s.c o  m-->
<html>
<head>
    <title>Example</title>
    <script type="text/javascript">
        var colors = ["A", "B", "C", "D", "E"]; 
        var colors2 = colors.splice(0,2); 
        document.writeln(colors); //C,D,E
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Insertion

Items can be inserted into a specific position by providing three or more arguments:

  • the starting position,
  • 0,
  • any number of items to insert.

0 means deleting zero number of items from the array. You can specify a fourth parameter, or any number of other parameters to insert.

<!DOCTYPE html><!--from   j  a  v a  2s .  co m-->
<html>
<head>
    <script type="text/javascript">
        var colors = ["A", "B", "C", "D", "E"]; 
        var colors2 = colors.splice(2,0,"A","B","C"); 
        document.writeln(colors); //A,B,A,B,C,C,D,E
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

Replacement

Items can be inserted and deleted with three arguments:

  • the starting position,
  • the number of items to delete,
  • any number of items to insert.

The number of items to insert doesn't have to match the number of items to delete.

splice(2, 1, "A", "B") deletes one item at position 2 and then inserts the strings "A" and "B" at position 2. splice() returns an array with removed items or empty array if no items were removed.

<!DOCTYPE html><!--from   ja v  a2 s  .c o m-->
<html>
<head>
    <script type="text/javascript">
        var colors = ["A", "B", "C"]; 
        //insert two values, remove one 
        var removed = colors.splice(1, 1, "D", "E"); 
        document.writeln(colors); //A,D,E,C
        document.writeln(removed); //B
       
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

The code above generates the following result.

Next chapter...

What you will learn in the next chapter:

  1. How to sort a Javascript array
  2. How to create your own function for sorting
  3. How to sort in descending order
Home » Javascript Tutorial » Array
Array Type
Array creation
Array type detecting
Array iterate
Array Length
Add to Array
Array join
Array concat()
Array every method
Array search from start with indexOf()
Array search from the end with lastIndexOf()
Array filter
Array mapping
Array forEach
Array pop and push
Array shift()
Array reduce()
Array reduceRight()
Array reverse()
Array slice()
Array some()
Array splice()
Array sort()
Array toString()
Array unshift()