Flash cards
Review the key moves
What is the main idea behind Typed Array Methods?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ myArr = Int16Array.from("1234567890");Put the learning moves in the order that makes the concept easiest to apply.
The from() Method
The from() method creates a new typed array from any iterable object:
Examples
const myArr = Int16Array.from("1234567890");The of() Method
The of() method creates a new typed array from a number of arguments:
Example
const myArr = Int16Array.of(1,2,3,4,5,6,7,8,9,0);The constructor.name Property
The constructor.name property returns the name (type) of a typed array:
myArr.constructor.nameThe BYTES_PER_ELEMENT Property
BYTES_PER_ELEMENT returns the number of bytes used to store each array element:
myArr.BYTES_PER_ELEMENTCommon Array Methods
Typed Arrays share many methods with Standard Arrays :
- Iteration : forEach(), map(), filter(), reduce(), reduceRight(), every(), some(), find(), findIndex(), findLast(), findLastIndex().
- Searching : includes(), indexOf(), lastIndexOf().
- Manipulation : at(), copyWithin(), fill(), reverse(), set(), slice(), sort(), subarray().
- Conversion : join(), toLocaleString(), toString().
- Non-mutating methods : toReversed(), toSorted(), with().
The fill() Method
The fill() method changes all elements in a typed array to a value:
myArr.fill(200);The fill() method takes two optional arguments: start index and end index:
myArr.fill(200, 0, 3);The find() Method
The find() method returns the first element that satisfies a test:
myArr.find((x) => x > 18)The some() Method
The some() method returns true if an element for which a provided function returns true:
myArr.some((x) => x > 18)Not Available Array Methods
Some array methods are NOT available for typed array.
This is due to the fixed-length nature and the lack of fixed structure.
| Method | Array | Typed Array |
|---|---|---|
| pop() | Yes | NO |
| push() | Yes | NO |
| shift() | Yes | NO |
| unshift() | Yes | NO |
| splice() | Yes | NO |
| flat() | Yes | NO |
| flatMap() | Yes | NO |
| concat() | Yes | NO |
| toSpliced() | Yes | NO |
Fetch API Example
fetch(url)
.then(request => request.arrayBuffer())
.then(arrayBuffer =>...);Canvas Example
const canvas = document.getElementById('my_canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const uint8ClampedArray = imageData.data;Learn More
Typed Array Reference
Array Buffers
DataViews
Atomics
Browser Support
Typed Arrays is an ES6 feature .
ES6 is fully supported in all modern browsers since June 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
|---|---|---|---|---|
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |