• JavaScript Video Tutorials

JavaScript - TypedArray slice() Method

The JavaScript TypedArray slice() method returns a copy of the extracted elements from the original typed array into a new typed array object, selected from the start index up to the end, but not including, the end index. The start and end indices represent the positions of the elements in the typed array.

This method does not modify or change the original typed array, but returns a new typed array containing the extracted elements. If we pass a negative value for the start parameter, it will start extracting elements from the end position of the typed array. For example, if start = −1, it will represent the last element.

Syntax

Following is the syntax of JavaScript TypedArray slice() method −

slice(start, end)

Parameters

This method accepts two optional parameters named 'start' and 'end', which are described below −

  • start (optional) − The zero-based index at which the elements start extracting.

  • end (optional) − The zero-based index at which the extraction will stop (the slice() method extracts up to, but does not include, that end).

Return value

This method returns a new typed array containing the extracted elements of the original typed array.

Examples

Example 1

If we omit both the 'start' and 'end' parameters, the slice() method begins extracting elements from the zeroth index and continues until the last index of the original typed array.

In the following program, we use the JavaScript slice() method to extract a portion of the original typed array [1, 2, 3, 4, 5, 6, 7, 8] into a new typed array object. Since we haven't specified start and end parameters for this method, it copies all elements from the original array.

<html>
<head>
   <title>JavaScript TypedArray slice() Method</title>
</head>
<body>
   <script>
      const T_array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]);
      document.write("Original TypedArray: ", T_array);
      
      //using the slice() method
      T_array.slice();
      document.write("<br>New TypedArray(after copying):", T_array);
   </script>    
</body>
</html>

Output

The above program returns a new TypedArray as [1, 2, 3, 4, 5, 6, 7, 8].

Original TypedArray: 1,2,3,4,5,6,7,8
New TypedArray(after copying):1,2,3,4,5,6,7,8

Example 2

If we only pass the start parameter to this method, it extracts elements from the specified start position and continues extracting until the last element in the original typed array.

The following is another example of the JavaScript TypedArray slice() method. In this case, we are trying to extract elements from the original typed array [10, 20, 30, 40, 50], starting at the specified start position 2, and continuing until the last element.

<html>
<head>
   <title>JavaScript TypedArray slice() Method</title>
</head>
<body>
   <script>
      const T_array = new Uint8Array([10, 20, 30, 40, 50]);
      document.write("Original TypedArray: ", T_array);
      const start = 2;
      document.write("<br>Start(extracting position) value: ", start);
      
      //creating new empty typed array
      let new_t_array = new Uint8Array([]);
      
      //using the slice() method
      new_t_array = T_array.slice(start);
      document.write("<br>New TypedArray(after copying): ", new_t_array);
   </script>    
</body>
</html>

Output

After executing the above program, it will display the new typed array as [30, 40, 50].

Original TypedArray: 10,20,30,40,50
Start(extracting position) value: 2
New TypedArray(after copying): 30,40,50

Example 3

If we pass both the 'start' and 'end' parameters to this method, it extracts elements starting from the specified 'start' position and continues extracting up to, but not including, the 'end' position.

In this example, we are using the TypedArray slice() method to extract a copy of a portion of an original typed array [20, 40, 60, 70, 90, 100, 120, 130] from starting specified start position 3, up to the specified end position 6 (not included).

<html>
<head>
   <title>JavaScript TypedArray slice() Method</title>
</head>
<body>
   <script>
      const T_array = new Uint8Array([20, 40, 60, 70, 90, 100, 120, 130]);
      document.write("Original TypedArray: ", T_array);
      const start = 3;
      const end = 6;
      document.write("<br>Start value: ", start);
      document.write("<br>End value: ", end);
      
      //creating new empty typed array
      let new_t_array = new Uint8Array([]);
      
      //using the slice() method
      new_t_array = T_array.slice(start, end);
      document.write("<br>New TypedArray(after copying): ", new_t_array);
   </script>    
</body>
</html>

Output

Once the above program is executed, it display the new TypedArray as −

Original TypedArray: 20,40,60,70,90,100,120,130
Start value: 3
End value: 6
New TypedArray(after copying): 70,90,100

Example 4

If we pass the start parameter value as -2 to the slice() method, it will extract the last two elements from the typed array [1, 2, 3, 4, 5].

<html>
<head>
   <title>JavaScript TypedArray slice() Method</title>
</head>
<body>
   <script>
      const T_array = new Uint8Array([1, 2, 3, 4, 5]);
      document.write("Original TypedArray: ", T_array);
      const start = -2;
      document.write("<br>Start value: ", start);
      
      //creating new empty typed array
      let new_t_array = new Uint8Array([]);
      
      //using the slice() method
      new_t_array = T_array.slice(start);
      document.write("<br>New TypedArray(after copying): ", new_t_array);
   </script>    
</body>
</html>

Output

The above program returns a new typed array as: [4, 5].

Original TypedArray: 1,2,3,4,5
Start value: -2
New TypedArray(after copying): 4,5
Advertisements