The TypedArray.from()
method creates a new typed array from an array-like or iterable object. This method is nearly the same as Array.from()
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
TypedArray.from(source[, mapFn[, thisArg]])
Where TypedArray
is one of:
Parameters
source
- An array-like or iterable object to convert to a typed array.
mapFn
Optional- Map function to call on every element of the typed array.
thisArg
Optional- Value to use as
this
when executingmapFn
.
Return value
A new TypedArray
instance.
Description
TypedArray.from()
lets you create typed arrays from:
- array-like objects (objects with a
length
property and indexed elements); or - iterable objects (objects where you can get its elements, such as
Map
andSet
).
TypedArray.from()
has the optional parameter mapFn
, which allows you to execute a map()
function on each element of the typed array (or subclass object) that is being created. This means that the following are equivalent:
TypedArray.from(obj, mapFn, thisArg)
TypedArray.from(Array.prototype.map.call(obj, mapFn, thisArg))
.
The length
property of the from()
method is 1
.
Differences from Array.from()
Some subtle distinctions between Array.from()
and TypedArray.from()
:
- If the
thisArg
value passed toTypedArray.from()
is not a constructor,TypedArray.from()
will throw aTypeError
, whereArray.from()
defaults to creating a newArray
. TypedArray.from()
uses[[Put]]
whereArray.from()
uses[[DefineProperty]]
. Hence, when working withProxy
objects, it callshandler.set
to create new elements rather thanhandler.defineProperty()
.- When the
source
parameter is an iterator, theTypedArray.from()
first collects all the values from the iterator, then creates an instance ofthisArg
using the count, then sets the values on the instance.Array.from()
sets each value as it receives them from the iterator, then sets itslength
at the end. - When
Array.from()
gets an array-like which isn't an iterator, it respects holes.TypedArray.from()
will ensure the result is dense.
Polyfill
You can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of from()
in implementations that do not natively support it.
if (!Int8Array.__proto__.from) { (function () { Int8Array.__proto__.from = function (obj, func, thisObj) { var typedArrayClass = Int8Array.__proto__; if(typeof this !== 'function') { throw new TypeError('# is not a constructor'); } if (this.__proto__ !== typedArrayClass) { throw new TypeError('this is not a typed array.'); } func = func || function (elem) { return elem; }; if (typeof func !== 'function') { throw new TypeError('specified argument is not a function'); } obj = Object(obj); if (!obj['length']) { return new this(0); } var copy_data = []; for(var i = 0; i < obj.length; i++) { copy_data.push(obj[i]); } copy_data = copy_data.map(func, thisObj); var typed_array = new this(copy_data.length); for(var i = 0; i < typed_array.length; i++) { typed_array[i] = copy_data[i]; } return typed_array; } })(); }
Examples
From an iterable object (Set)
const s = new Set([1, 2, 3]); Uint8Array.from(s); // Uint8Array [ 1, 2, 3 ]
From a string
Int16Array.from('123'); // Int16Array [ 1, 2, 3 ]
Use with arrow function and map
Using an arrow function as the map function to manipulate the elements
Float32Array.from([1, 2, 3], x => x + x); // Float32Array [ 2, 4, 6 ]
Generate a sequence of numbers
Uint8Array.from({length: 5}, (v, k) => k); // Uint8Array [ 0, 1, 2, 3, 4 ]
Specifications
Specification |
---|
ECMAScript (ECMA-262) The definition of '%TypedArray%.from' in that specification. |
Browser compatibility
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
from | Chrome Full support 45 | Edge Full support 14 | Firefox Full support 38 | IE No support No | Opera No support No | Safari Full support 10 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 38 | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android No support No | nodejs Full support 4.0.0 |
Legend
- Full support
- Full support
- No support
- No support