JavaScript: Array.prototype.splice
splice
is the general way to add or remove elements of a array, at any index position.
arrayX.splice(start)
-
Delete all tail elements starting at index start, including it.
Return a Array of removed elements, or empty array if none removed.
arrayX.splice(start, n)
- Delete n items.
arrayX.splice(start, n, new1, new2 etc)
- Add new items.
Clear All
arrayX.splice(0)
const xx = [3, 4, 5]; xx.splice(0); console.log(xx.length === 0);
Note, it's different from simply assign it a new empty array such as
arrayX = []
Because that gives the variable arrayX a new value.
This is important when you use const
to declare the variable.
const xx = [3, 4, 5]; xx = []; // TypeError: Assignment to constant variable.
Delete Tail
const xx = [0, 1, 2, 3, 4, 5]; // example of delete tail of array // removed rest starting at index 2 const yy = xx.splice(2); // array is modified console.log( JSON.stringify( xx ) === "[0,1]" ); // removed items console.log( JSON.stringify( yy ) === "[2,3,4,5]");
Delete N Items at a Index
const xx = [0, 1, 2, 3, 4, 5]; // example of array splice, 2 arguments form const yy = xx.splice(2, 3); // start at index 2, removed 3 items // the new value console.log(JSON.stringify(xx) === "[0,1,5]"); // removed items console.log(JSON.stringify(yy) === "[2,3,4]");
Insert Element to Array
Example of adding element to array:
const xx = [0, 1, 2, 3, 4, 5]; // example of adding element to array // add "b" before index 2 const yy = xx.splice(2, 0, "b"); console.log(JSON.stringify(xx) === `[0,1,"b",2,3,4,5]`); // removed items console.log(JSON.stringify(yy) === "[]");
const xx = [0, 1, 2, 3]; /* example of adding array to array if you add a array, it won't be flattened add [88,99] before index 2 */ xx.splice(2, 0, [88, 99]); console.log(JSON.stringify(xx) === "[0,1,[88,99],2,3]");
Replace a Slice (Delete and Add)
const xx = [0, 1, 2, 3, 4, 5]; /* example of array splice, remove some, add some start at index 2, removed 3 items, add "a" */ const yy = xx.splice(2, 3, "a"); // the new value console.log( JSON.stringify( xx ) === `[0,1,"a",5]` ); // removed items console.log( JSON.stringify( yy ) === "[2,3,4]");
Splice Insert Without Nesting
if you have a function that returns a array, and you need to call a function to insert into a array but without creating a nested array. Here's how.
In JS2015, use the “spread operator” of 3 dots, which basically removes the bracket:
// array splice insert without nesting // you have a function that returns a array. const ff = ((x,y) => [x,y]); // you need to use this function to insert elements // array const xx = [1, 2, 3, 4]; // the index to insert at const xstart = 1; // number of element to delete before insert const xdeleteN = 0; // insert without creating nesting xx.splice(xstart, xdeleteN, ...ff("a","b")); // check console.log( JSON.stringify( xx ) === `[1,"a","b",2,3,4]`);
pre-JS2015 version:
// array splice insert without nesting // you have a function that returns a array. // you need to use this function to insert elements function addEle() { return ["a", "b"]; } // your array const tt = [1, 2, 3, 4]; // the index to insert at const i = 1; // number of element to delete before insert const d = 0; // insert without creating nesting Array.prototype.splice.apply(tt, [i, d].concat(addEle())); console.log(tt); // [ 1, 'a', 'b', 2, 3, 4 ]