Quick Reach
The slice method of JavaScript arrays
The slice method is used in arrays to get selected elements of an existing array. You may specify where to start and end, to select array elements. The index starts at zero. The slice method returns an array that contains those selected elements.
See an example of slice method
Syntax of javascript array slice
Following is the syntax of javascript array slice method:
array_name.slice( starting_index, end_index);
If you do not specify any index number and leave it blank, the whole array will be returned. You can also specify a negative index number in JS slice method.
The index starts at zero.
Also note, that unlike many other Javascript array methods the actual array remains unchanged after using the slice method.
See examples below to learn more about array slice in javascript.
Javascript slice example with start and end index
The following example shows how to use javascript array slice with start and end index numbers. We created a six elements array and printed in HTML paragraph. After that, we used array slice method on that array and assigned the returned array to another array. The returned array’s elements are shown in an alert message. See demo by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<p id=“p2”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4,5,6];
var i;
var arrdisplay = “The array before Slice: <BR>”;
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
Arrsliced = NumArr.slice(3,6);
alert (Arrsliced);
var arrdisplay2 = “The array after Slice: <BR>”;
for (i=0; i < NumArr.length; i++){
arrdisplay2 += NumArr[i] + “<BR>”;
}
document.getElementById(“p2”).innerHTML = arrdisplay2;
</script>
</body>
</html>
|
You see, a new array contains three elements (4,5,6) that are shown in an alert. While array after using javascript slice method is also shown, that remains unchanged.
Javascript array slice example without start and end index
Now look at what happens, if you do not provide start and end index numbers in array slice method. See demo by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<p id=“p2”></p>
<script type=“text/javascript”>
var NumArr = [1,2,3,4,5,6];
var i;
var arrdisplay = “The array before Slice: <BR>”;
for (i=0; i < NumArr.length; i++){
arrdisplay += NumArr[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
Arrsliced = NumArr.slice();
alert (Arrsliced);
var arrdisplay2 = “The array after Slice: <BR>”;
for (i=0; i < NumArr.length; i++){
arrdisplay2 += NumArr[i] + “<BR>”;
}
document.getElementById(“p2”).innerHTML = arrdisplay2;
</script>
</body>
</html>
|
You can see, the alert showing all elements from the sliced array. The returned array, as mentioned earlier will start slicing array from 0 if you do not specify the starting index number in slice method.
Also see Javascript Array | Javascript splice
Leave A Comment?