Differences among split, slice and split in JS

I often meet these three when doing questions these days. They look very similar. I have to find them every time, so I also record them this time.
1, splice() method
The splice() method modifies the array by deleting or replacing existing elements or adding new elements in place, and returns the modified contents in the form of an array. (this method will change the original array and get a new array)
Syntax:

arrayObject.splice(index,howmany,item1,.....,itemX)

Parameters:
index - required. Integer that specifies the position of the item to be added / deleted. Use a negative number to specify the position from the end of the array.
howmany - required. Number of items to delete. If set to 0, the item is not deleted.
item1,..., itemX -- optional. Adds a new item to the array.

for instance:
1. Add element:

 <script>
        var arr = [1,2,3,4,5,6]
        document.write("The original array is:" + arr + "\n" )
        arr.splice(2,0,4)
        document.write("The new array is:" ,arr)
    </script>

The result indicates that 4 this element is added at the second index position

2. Replace element

 <script>
        var arr = [1,2,3,4,5,6]
        document.write("The original array is:" + arr + "</br>" )
        arr.splice(2,1,2)
        document.write("The new array is:" ,arr)
    </script>

The result represents replacing 3 elements with 2 elements at the second index position

3. Delete element (one parameter)

    <script>
        var arr = [1,2,3,4,5,6]
        document.write("The original array is:" + arr + "</br>" )
        arr.splice(-2)
        document.write("The new array is:" ,arr)
    </script>

Slice (index) - > start from the position of index and delete all subsequent elements (including the first index). If index < 0, delete the last - index element. This result means to delete the two elements from the end

4. Delete element (two parameters)

  <script>
        var arr = [1,2,3,4,5,6]
        document.write("The original array is:" + arr + "</br>" )
        arr.splice(2,1)
        document.write("The new array is:" ,arr)
    </script>

The result indicates that the 3 element at the second index position is deleted

explain

  • The splice() method deletes zero or more elements starting at index and replaces those deleted elements with one or more values declared in the parameter list.
  • If an element is deleted from an arrayObject, an array containing the deleted element is returned.

2, slice() method
It is used to intercept the array and return the intercepted new array. Both array and string objects are used (this method will not change the original array)
Syntax:

array.slice(start, end)

Parameters:
Start:: required to specify where to start selection. If it is a negative number, it is specified to count from the end of the array, that is, - 1 refers to the last element, and so on;
End: optional, specifying where to end the selection. This parameter is the array subscript at the end of the array fragment. If this parameter is not specified, the segmented array contains all elements from star to the end of the array. If this parameter is negative, it specifies the elements starting from the end of the array.

Return value: a new array containing the elements in the ArrayObject from start to end (excluding this element).
give an example

   <script>
        var arr = [1,2,3,4,5,6]
        var del = arr.slice(1,2)  //Delete from the position with subscript 1, delete two elements (excluding the element with subscript 2)
        var del1 = arr.slice(-1)  //Is the last bit of the element
        var del2 = arr.slice(7)  //When the parameter of the element is greater than length Returns an empty array
        var del3 = arr.slice(-7) //When only one parameter is passed in and it is a negative number, length will be added to the parameter
        var del4 = arr.slice(1,-2)  //When the passed in parameter is one positive and one negative, the length will be limited to the addition of negative numbers and then intercepted
        console.log(del);
        console.log(del1);
        console.log(del2);
        console.log(del3);
        console.log(del4);
    </script>

3, split() method
The split() method is used to split a string into an array of strings. (this method does not change the original string.)
Tip: if an empty string ("") is used as a separator, each character in the stringObject will be split.

Syntax:

string.split(separator,limit)

Parameters:
separator: optional. String or regular expression to split string Object from the place specified by this parameter.
limit: optional. This parameter specifies the maximum length of the returned array. If this parameter is set, no more substrings will be returned than the array specified by this parameter. If this parameter is not set, the entire string will be split regardless of its length.

give an example

 <script>
        var str="How are you doing today?";
		var n=str.split("");
		console.log(n);
    </script>

 <script>
        var str="How are you doing today?";
		var n=str.split(" ",3);
		console.log(n);
    </script>

Keywords: Javascript Front-end

Added by premracer on Wed, 05 Jan 2022 19:36:42 +0200