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 elements starting at index start, inclusive. 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 aa = [3, 4, 5]; aa = []; // TypeError: Assignment to constant variable.
Delete Tail
const uu = [0, 1, 2, 3, 4, 5]; // example of array splice, 1 argument form const result = uu.splice(2); // removed rest starting at index 2 console.log(uu); // [ 0, 1 ] the new value console.log(result); // [ 2, 3, 4, 5 ] removed items
Delete N Items at a Index
const aa = [0, 1, 2, 3, 4, 5]; // example of array splice, 2 arguments form const returnValue = aa.splice(2, 3); // start at index 2, removed 3 items console.log(aa); // [ 0, 1, 5 ] the new value console.log(returnValue); // [ 2, 3, 4 ] removed items
Insert Element to Array
Example of adding element to array:
const uu = [0, 1, 2, 3, 4, 5]; // example of adding element to array const rs = uu.splice(2, 0, "b"); // add "b" before index 2 console.log(uu); // [ 0, 1, 'b', 2, 3, 4, 5 ] console.log(rs); // [] removed items
// example of adding array to array // if you add a array, it won't be flattened const uu = [0, 1, 2, 3]; uu.splice(2, 0, [88, 99]); // add [88,99] before index 2 console.log(uu); // [ 0, 1, [ 88, 99 ], 2, 3 ]
Replace a Slice (Delete and Add)
const uu = [0, 1, 2, 3, 4, 5]; // example of array splice, 3 arguments form const rs = uu.splice(2, 3, "a"); // start at index 2, removed 3 items, add "a" console.log(uu); // [ 0, 1, 'a', 5 ] the new value console.log(rs); // [ 2, 3, 4 ] removed items
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. // 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 tt.splice(i, d, ...addEle()); console.log(tt); // [ 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 ]