Javascript Array splice()

Introduction

Javascript array splice() method changes the contents of an array by

  • removing existing elements or
  • replacing existing elements or
  • adding new elements in place.

It returns an array containing the deleted elements. 

let arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
Parameter
 Optional
 Meaning
start



 not



 The index to start changing the array.
If start >= arr.length, start is set array length.
If start < 0, use array.length + start as start.
If start < 0 and array.length + start is less than 0, it starts from index 0.
deleteCount




 Optional




 the number of elements to remove from start.
If deleteCount is omitted, or
if its value is equal to or larger than array.length - start,
then all the elements from start to the end of the array will be deleted.
If deleteCount is 0 or negative, no elements are removed.
item1, item2, ...

 Optional

 The elements to add to the array, beginning from start.
If you do not specify any elements, splice() will only remove elements from the array.

If only one element is removed, an array of one element is returned.

If no elements are removed, an empty array is returned.

Add items to the array: 

var languages = ["CSS", "HTML", "Java", "Javascript"];
console.log(languages);/*  w w w .  j a v  a 2 s  . co m*/

languages.splice(2, 0, "SQL", "C");
console.log(languages);

At position 2, add the new items, and remove 1 item: 

var languages = ["CSS", "HTML", "Java", "Javascript"];
console.log(languages);//from   www .ja v  a  2s.com

languages.splice(2, 1, "SQL", "C");
console.log(languages);

At position 2, remove 2 items: 

var languages = ["CSS", "HTML", "Java", "Javascript", "Kiwi"];
console.log(languages);//from   w w w. jav  a  2 s .c om

languages.splice(2, 2);
console.log(languages);

let colors = ["red", "green", "blue"];
let 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", "HTML"); // insert two items at position 1 
console.log(colors); // green,yellow,HTML,blue 
console.log(removed); // empty array 

removed = colors.splice(1, 1, "red", "purple"); // insert two values, remove one 
console.log(colors); // green,red,purple,HTML,blue 
console.log(removed);                             // yellow - one item array

The effect of negative start index. 

let languages = ['A', 'B', 'C', 'D']
let removed = languages.splice(1);
console.log(languages);/*  ww w  .  j  av a  2 s  . co m*/
console.log(removed);

languages = ['A', 'B', 'C', 'D']
removed = languages.splice(-1);
console.log(languages);
console.log(removed);

Remove 0 (zero) elements before index 2, and insert "Javascript" 

let languages = ['Java', 'C++', 'CSS', 'HTML']
let removed = languages.splice(2, 0, 'Javascript')
console.log(languages);//from  w w  w . ja va2  s  . co  m
console.log(removed);

Remove 0 (zero) elements before index 2, and insert "C" and "SQL" 

let languages = ['Java', 'C++', 'CSS', 'HTML']
let removed = languages.splice(2, 0, 'C', 'SQL')
console.log(languages);//from   w  w  w .  j  a  va2s. c  o  m
console.log(removed);

Remove 1 element at index 3 

let languages = ['Java', 'C++', 'CSS', 'HTML','C','SQL'];
let removed = languages.splice(3, 1)
console.log(languages);// ww w  .j  a  v  a2  s . c  o m
console.log(removed);

Remove 1 element at index 2, and insert "Python" 

let languages = ['Java', 'C++', 'CSS', 'HTML','C','SQL'];
let removed = languages.splice(2, 1, 'Python')
console.log(languages);/*from  w w w .  j  a  va  2s  .  c om*/
console.log(removed);

Remove 2 elements from index 0, and insert "A", "B" and "C" 

let languages = ['Java', 'C++', 'CSS', 'HTML','C','SQL'];
let removed = languages.splice(0, 2, 'A', 'B', 'C')
console.log(languages);/*from   ww w. j  a  va  2s  . c  o m*/
console.log(removed);

Remove 2 elements from index 2 

let languages = ['Java', 'C++', 'CSS', 'HTML','C','SQL'];
let removed = languages.splice(2, 2)
console.log(languages);/*from  w w  w  . jav  a  2 s  . c  om*/
console.log(removed);

Remove 1 element from index -2 

let languages = ['Java', 'C++', 'CSS', 'HTML','C','SQL'];
let removed = languages.splice(-2, 1)
console.log(languages);/*from   w w  w. j a va2  s .  c om*/
console.log(removed);

Remove all elements after index 2 (incl.) 

let languages = ['Java', 'C++', 'CSS', 'HTML','C','SQL'];
let removed = languages.splice(2)
console.log(languages);//w  w  w. j a  va  2s  .  c om
console.log(removed);



PreviousNext

Related