JavaScript - toSpliced() method

revision:


Category : array

The toSpliced() method of Array instances is the copying version of the splice() method. It returns a new array with some elements removed and/or replaced at a given index.

Syntax :

        toSpliced(start)
        toSpliced(start, deleteCount)
        toSpliced(start, deleteCount, item1)
        toSpliced(start, deleteCount, item1, item2, itemN)
    

Parameters:

Parameters:

start : zero-based index at which to start changing the array, converted to an integer.

Negative index counts back from the end of the array — if "start < 0", "start + array.length" is used.
If "start < -array.length" or start is omitted, 0 is used.
If "start >= array.length", no element will be deleted, but the method will behave as an adding function, adding as many elements as provided.

deleteCount : optional. An integer indicating the number of elements in the array to remove from start. If "deleteCount" is omitted, or if its value is greater than or equal to the number of elements after the position specified by "start", then all the elements from "start" to the end of the array will be deleted. However, if you wish to pass any "itemN" parameter, you should pass "Infinity" as "deleteCount" to delete all elements after "start", because an explicit "undefined" gets converted to "0". If "deleteCount" is "0" or negative, no elements are removed. In this case, you should specify at least one new element.

item1, ..., itemN : optional. The elements to add to the array, beginning from "start". If you do not specify any elements, "toSpliced()"" will only remove elements from the array.

Examples:

            
        

Practical examples

example: deleting, adding, and replacing elements.

code:
                    <div>
                        <p id="spliced-1"></p>
                        <p id="spliced-2"></p>
                        <p id="spliced-3"></p>
                        <p id="spliced-4"></p>
                        <p id="spliced-5"></p>
                        <p id="spliced-6"></p>
                    </div>
                    <script>
                        const months = [" Jan", " Mar", " Apr", " May"];
                        document.getElementById("spliced-1").innerHTML = "months : " + months;
                        // Inserting an element at index 1
                        const months2 = months.toSpliced(1, 0, "Feb");
                        console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]
                        document.getElementById("spliced-2").innerHTML = "months after spliced1: " + months2;
                        // Deleting two elements starting from index 2
                        const months3 = months2.toSpliced(2, 2);
                        console.log(months3); // ["Jan", "Feb", "May"]
                        document.getElementById("spliced-3").innerHTML = "months after spliced2: " + months3;
                        // Replacing one element at index 1 with two new elements
                        const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
                        console.log(months4); // ["Jan", "Feb", "Mar", "May"]
                        document.getElementById("spliced-4").innerHTML = "months after spliced3: " + months4;
                        // Original array is not modified
                        console.log(months); // ["Jan", "Mar", "Apr", "May"]           
                        document.getElementById("spliced-5").innerHTML = "original - months :" + months;
                        
                    </script>
                

example: the difference between toSpliced() method and splice() method.

code:
                    <div>
                        <p id="spliced-7"></p>
                        <p id="spliced-8"></p>
                        <p id="spliced-9"></p>
                    </div>
                    <script>
                        const numbers = [1, 2, 3];
                        const splicedNumbers = numbers.toSpliced(1, 1);
            
                        console.log(numbers) // Output: [1, 2, 3]
                        console.log(splicedNumbers); // Output[1, 3]
                        document.getElementById("spliced-7").innerHTML = "original - numbers :" + numbers;
                        document.getElementById("spliced-8").innerHTML = "spliced - numbers :" + splicedNumbers;
                    </script>