J

JavaScript Handbook

Clean • Professional

Typed Array Methods in JavaScript

4 minute

Typed Array Methods

Typed Arrays are array-like objects for numeric data in JavaScript. They are fixed-length and typed (e.g., Uint8Array, Int16Array, Float32Array). You can manipulate their elements using built-in methods optimized for performance.

1. Creation of Typed Arrays

a) Constructor

Creates a typed array of a given length, optionally initialized with values.

  • Default values are 0.
const arr = new Uint8Array(5);
console.log(arr); // Uint8Array [0,0,0,0,0]

You can also initialize from an array:

const arr2 = new Int16Array([10, 20, 30]);
console.log(arr2); // Int16Array [10,20,30]

b) TypedArray.from()

Creates a new typed array from an array-like or iterable object. You can also transform elements using a mapping function.

const arr = Uint8Array.from([1,2,3], x => x*2);
console.log(arr); // Uint8Array [2,4,6]

c) TypedArray.of()

Creates a new typed array from a list of arguments.

const arr = Uint8Array.of(1, 2, 3);
console.log(arr); // Uint8Array [1,2,3]

2. Accessing and Searching Elements

a) indexOf(value[, fromIndex])

Returns the first index of value. Returns -1 if not found.

const arr = new Int8Array([10,20,30]);
console.log(arr.indexOf(20)); // 1

b) lastIndexOf(value[, fromIndex])

Returns the last index of a value.

const arr = new Int8Array([10,20,10]);
console.log(arr.lastIndexOf(10)); // 2

c) includes(value[, fromIndex])

Returns true if the array contains the value.

const arr = new Uint8Array([1,2,3]);
console.log(arr.includes(2)); // true

3. Iteration Methods

Typed Arrays support looping methods similar to normal arrays.

a) forEach(callback[, thisArg])

Executes a function for each element, without changing the array.

const arr = new Uint8Array([1,2,3]);
arr.forEach(x => console.log(x*2));
// Output: 2,4,6

b) map(callback[, thisArg])

Returns a new Typed Array where each element is transformed by the callback.

const arr = new Uint8Array([1,2,3]);
const doubled = arr.map(x => x*2);
console.log(doubled); // Uint8Array [2,4,6]

c) filter(callback[, thisArg])

Creates a new Typed Array containing elements that pass a test.

const arr = new Uint8Array([1,2,3,4]);
const evens = arr.filter(x => x%2===0);
console.log(evens); // Uint8Array [2,4]

d) reduce(callback[, initialValue])

Reduces array to a single value from left to right.

const arr = new Uint8Array([1,2,3]);
const sum = arr.reduce((a,b) => a+b, 0);
console.log(sum); // 6

e) reduceRight(callback[, initialValue])

Like reduce, but from right to left.

const arr = new Uint8Array([1,2,3]);
const result = arr.reduceRight((a,b)=>a-b,0);
console.log(result); // -6

f) some(callback)

Returns true if any element passes the test.

const arr = new Uint8Array([1,2,3]);
console.log(arr.some(x => x>2)); // true

g) every(callback)

Returns true if all elements pass the test.

const arr = new Uint8Array([1,2,3]);
console.log(arr.every(x => x>0)); // true

h) find(callback)

Returns the first element that passes a test, or undefined.

const arr = new Uint8Array([1,2,3]);
console.log(arr.find(x => x>1)); // 2

i) findIndex(callback)

Returns the index of the first element that passes the test, or -1.

const arr = new Uint8Array([1,2,3]);
console.log(arr.findIndex(x => x>1)); // 1

4. Subarray and Slicing

a) slice(begin[, end])

Returns a new Typed Array containing elements from begin to end-1. Original array unchanged.

const arr = new Uint8Array([1,2,3,4]);
const sliced = arr.slice(1,3);
console.log(sliced); // Uint8Array [2,3]

b) subarray(begin[, end])

Returns a view on the same buffer; changes affect the original array.

const arr = new Uint8Array([1,2,3,4]);
const view = arr.subarray(1,3);
view[0] = 99;
console.log(arr); // Uint8Array [1,99,3,4]

5. Copying and Filling

a) set(array[, offset])

Copies values from another array into the typed array at specified offset.

const arr = new Uint8Array(4);
arr.set([1,2],1);
console.log(arr); // Uint8Array [0,1,2,0]

b) fill(value[, start[, end]])

Fills array elements with a value from start to end (exclusive).

const arr = new Uint8Array(4);
arr.fill(42,1,3);
console.log(arr); // Uint8Array [0,42,42,0]

6. Sorting and Reversing

a) sort([compareFunction])

Sorts elements in place. By default, it sorts numerically.

const arr = new Uint8Array([3,1,2]);
arr.sort();
console.log(arr); // Uint8Array [1,2,3]

b) reverse()

Reverses elements in place.

const arr = new Uint8Array([1,2,3]);
arr.reverse();
console.log(arr); // Uint8Array [3,2,1]

7. Joining and Converting

MethodDescription
join([separator])Joins elements into a string with optional separator.
toString()Returns comma-separated string.
bufferAccess underlying ArrayBuffer.
const arr = new Uint8Array([1,2,3]);
console.log(arr.join("-"));   // "1-2-3"
console.log(arr.toString());  // "1,2,3"
console.log(arr.buffer);      // ArrayBuffer object

8. Copying Within Array

copyWithin(target, start[, end])

Copies a portion of the array to another position in the same array.

  • target → index to copy to
  • start → start index of source
  • end → end index of source (exclusive)
const arr = new Uint8Array([1,2,3,4]);
arr.copyWithin(2,0,2);
console.log(arr); // Uint8Array [1,2,1,2]

9. Iterators

Typed Arrays support iterators for looping or conversion:

  • entries()[index, value] pairs
  • keys() → indexes only
  • values() → values only
const arr = new Uint8Array([1,2]);
console.log([...arr.entries()]); // [[0,1],[1,2]]
console.log([...arr.keys()]);    // [0,1]
console.log([...arr.values()]);  // [1,2]

 

Article 0 of 0