Array.from()
The Array.from()
method creates a new Array
instance from an array-like or iterable object.
In ES6, class syntax allows for the subclassing of both built-in and user defined classes; as a result, class-side static methods such as Array.from
are "inherited" by subclasses of Array
and create new instances of the subclass, not Array
.
Syntax
Array.from(arrayLike[, mapFn[, thisArg]])
Parameters
arrayLike
- An array-like or iterable object to convert to an array.
mapFn
- Optional. Map function to call on every element of the array.
thisArg
- Optional. Value to use as
this
when executingmapFn
.
Return value
A new Array
instance.
Description
Array.from()
lets you create 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
).
Array.from()
has an optional parameter mapFn
, which allows you to execute a map
function on each element of the array (or subclass object) that is being created. More clearly, Array.from(obj, mapFn, thisArg)
is the same as Array.from(obj).map(mapFn, thisArg)
, except that it does not create an intermediate array. This is especially important for certain array subclasses, like typed arrays, since the intermediate array would necessarily have values truncated to fit into the appropriate type.
The length
property of the from()
method is 1.
Examples
// Array-like object (arguments) to Array function f() { return Array.from(arguments); } f(1, 2, 3); // [1, 2, 3] // Any iterable object... // Set var s = new Set(["foo", window]); Array.from(s); // ["foo", window] // Map var m = new Map([[1, 2], [2, 4], [4, 8]]); Array.from(m); // [[1, 2], [2, 4], [4, 8]] // String Array.from("foo"); // ["f", "o", "o"] // Using an arrow function as the map function to // manipulate the elements Array.from([1, 2, 3], x => x + x); // [2, 4, 6] // Generate a sequence of numbers Array.from({length: 5}, (v, k) => k); // [0, 1, 2, 3, 4]
Polyfill
Array.from
was added to the ECMA-262 standard in the 6th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of Array.from
in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming Object
and TypeError
have their original values and that callback.call
evaluates to the original value of Function.prototype.call
. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.
// Production steps of ECMA-262, Edition 6, 22.1.2.1 // Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from if (!Array.from) { Array.from = (function () { var toStr = Object.prototype.toString; var isCallable = function (fn) { return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; }; var toInteger = function (value) { var number = Number(value); if (isNaN(number)) { return 0; } if (number === 0 || !isFinite(number)) { return number; } return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); }; var maxSafeInteger = Math.pow(2, 53) - 1; var toLength = function (value) { var len = toInteger(value); return Math.min(Math.max(len, 0), maxSafeInteger); }; // The length property of the from method is 1. return function from(arrayLike/*, mapFn, thisArg */) { // 1. Let C be the this value. var C = this; // 2. Let items be ToObject(arrayLike). var items = Object(arrayLike); // 3. ReturnIfAbrupt(items). if (arrayLike == null) { throw new TypeError("Array.from requires an array-like object - not null or undefined"); } // 4. If mapfn is undefined, then let mapping be false. var mapFn = arguments.length > 1 ? arguments[1] : void undefined; var T; if (typeof mapFn !== 'undefined') { // 5. else // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. if (!isCallable(mapFn)) { throw new TypeError('Array.from: when provided, the second argument must be a function'); } // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. if (arguments.length > 2) { T = arguments[2]; } } // 10. Let lenValue be Get(items, "length"). // 11. Let len be ToLength(lenValue). var len = toLength(items.length); // 13. If IsConstructor(C) is true, then // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. // 14. a. Else, Let A be ArrayCreate(len). var A = isCallable(C) ? Object(new C(len)) : new Array(len); // 16. Let k be 0. var k = 0; // 17. Repeat, while k < len… (also steps a - h) var kValue; while (k < len) { kValue = items[k]; if (mapFn) { A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); } else { A[k] = kValue; } k += 1; } // 18. Let putStatus be Put(A, "length", len, true). A.length = len; // 20. Return A. return A; }; }()); }
Specifications
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) The definition of 'Array.from' in that specification. |
Standard | Initial definition. |
ECMAScript 2017 Draft (ECMA-262) The definition of 'Array.from' in that specification. |
Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 45 | 32 (32) | (Yes) | No support | No support | 9.0 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | No support | 32.0 (32) | No support | No support | No support |
See also
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/array/from