“This is the 20th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

The slice() method returns a copy of the array part to the new array object. This object is selected from start to end. Note that this method does not modify the original array. In addition, if you add a new element to one array, the other array is unaffected.

grammar

The slice() method takes the start and end indexes of the array.

start

Start is a zero-based index to start copying a portion of the array. If not defined, the default value of start is 0. If start is greater than the index range of the array, the slice() method returns an empty array.

In addition, start can use negative indexes. Slice (-1) extracts the last element of the array.

end

The end argument is optional. If the slice() function has only one argument, it is start. If omitted, the slice() method extracts from the end of the array.

If end is greater than the length of the array, slice() extracts all the way to the end of the array, only if it is omitted.

End is the element before the index is extracted, excluding the index end. Therefore, the last element of the index is not included in the copy of the array. For example, slice(1,3) extracts are the second and third elements of the array, that is, starting at index 1 of the array and containing the values from index 1 to index 3, but not the elements with index 3.

Const arrNumbers =,3,5,6,7 [1]; console.log(arrNumbers.slice(0, 3)); // [1, 3, 5]Copy the code

This means that the array arrNumbers are copied from index 0 to index 3, excluding elements with index 3.

1. Copy the array

The first example is the basic functionality of the slice() function, which copies the original array with no arguments. Sometimes, you might want to update some elements in the array. However, if you want to protect elements in the original array, you can use slice() to create a shallow copy of the original array.

const arrNumbers = [1, 2, 3, 4, 5, 6]; const copyNumbers = arrNumbers.slice(); console.log(copyNumbers); // [ 1, 2, 3, 4, 5, 6 ] copyNumbers[1] = 0; console.log(copyNumbers); // [ 1, 0, 3, 4, 5, 6 ] console.log(arrNumbers); // [1, 2, 3, 4, 5, 6]Copy the code

2. Subarray starting with index n

The second example of the slice() method is to copy a subarray starting with array index n.

const arrNumbers = [1, 2, 3, 4, 5, 6]; const copyNumbers = arrNumbers.slice(2); console.log(copyNumbers); // [3, 4, 5, 6]Copy the code

We can also copy the last n bits of the array, using -n as the argument, as follows:

const arrNumbers = [1, 2, 3, 4, 5, 6]; const copyNumbers = arrNumbers.slice(-2); console.log(copyNumbers); // [5, 6]Copy the code

3. Transform an array-like object into an array

An array-like object can be converted to an array using the slice() method. For example, the following code snippet:

function transformToArray() { return Array.prototype.slice.call(arguments); } const newArray = transformToArray("1", "2", "3", "4"); console.log(newArray); // ['1', '2', '3', '4']Copy the code

The above code snippet can be used to define variadic functions.

4. Convert NodeList to an array

The NodeList object is a collection of nodes extracted from the document and can be returned as a node-list object using the method querySelectorAll(). For example, you can select all

nodes in an HTML document, and you can use slice() to convert the selected list of nodes into an array.

const elemP = document.querySelectorAll("p");
const elemNodes = Array.prototype.slice.call(elemP);
console.log(elemNodes);
Copy the code

5. Replace a specific index in the string

Substitution functions can be created using the slice() function.

String.prototype.append = function (index, value) { return `${this.slice(0, index)}${value}${this.slice(index)}`; }; Const testString = "New Year "; Console. log(testString.append(2, "happy ")); // Happy New YearCopy the code

conclusion

Learning how to use JavaScript built-in functions and examples can improve your coding skills, expand your coding thinking, and add more ways to solve problems. Slice () is a very useful built-in function in arrays.