Array.from()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Resumo

O método Array.from() cria uma nova instância de um Array quando for passado um array-like ou um iterable object como argumento.

No ES6, a sintaxe de classe permite a subclassificação de classes nativas e classes definidas pelo usuário; como resultado, os métodos estáticos pertencentes a classe, como Array.from, são "herdadas" por subclasses do Array e criam novas instâncias da subclasse, não do Array.

Sintaxe

Array.from(arrayLike[, mapFn[, thisArg]])

Parâmetros

arrayLike

Um array-like ou um objeto iterável para converter em array.

mapFn

Opcional. Função Map que será chamada para cada elemento do array.

thisArg

Opcional. Valor a ser utilizado como this quando a mapFn for chamada.

Descrição

Array.from() deixa você criar um Array de:

  • objetos array-like (objetos com a propriedade length e elementos indexados); ou
  • Objetos iteráveis (objetos onde você pode coletar seus elementos, assim como Map e Set).

Array.from() tem um parametro opcional mapFn, que permite executar a função map para cada elemento do array (ou subclasse de objeto) que está sendo criado. Simplificando, Array.from(obj, mapFn, thisArg) é o mesmo que Array.from(obj).map(mapFn, thisArg), com a excessão de não cria um array intermediário . Isso é importante, principalmente para certas subclasses de array, como typed array, no qual o array intermediário iria necessáriamente ter o valor truncado para encaixar-se no tipo apropriado.

A propriedade length do método from() é 1.

No ES2015, a sintaxe de class permite a definição de subclasses tanto internas quando definidas pelo usuário. Como resultado, métodos estáticos como Array.from() são "herdados" pelas subclasses de Array, e cria novas instâncias da subclasse, não de Array.

Polyfill

Array.from foi adicionado ao padrão ECMA-262 em sua 6ª edição; desta forma, não está presente na aplicações anteriores da especificação. Na ausência do código nativo, você pode inserir o código seguinte no início do script, permitindo o uso parcial da funcionalidade do Array.from. Esse algorítmo é equivalente ao especificado no ECMA-262, 6ª edição, exceto que Object e TypeError tem seus valores originais e que callback.call retorna o valor original de Function.prototype.call. Além disso, os verdadeiros iterables não podem ser representados genéricamente no polyfill, criando a principal distinção do que foi definido na especificação.

js
// 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;
    };
  })();
}

Exemplos

js
// Array-like object (arguments) para um Array
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);
// [1, 2, 3]

// Qualquer iterable object ...
// com 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"]

// Usando um arrow function como função map para
// manipular os elementos
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// Gerando uma sequência de números
Array.from({ length: 5 }, (v, k) => k);
// [0, 1, 2, 3, 4]

Especificações

Specification
ECMAScript® 2025 Language Specification
# sec-array.from

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
from

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também