El método Array.from() crea una nueva instancia de Array a partir de un objeto iterable.

Sintaxis

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

Parámetros

arrayLike
Objeto iterable para convertirlo en un array.
mapFnOptional
Función de mapa para llamar a cada elemento de la matriz.
thisArgOptional
Valor para usar como this al ejecutar mapFn.

Valor de retorno

Una nueva instancia de Array.

Descripción

Array.from() permite crear Arrays de:

  • Objetos array-like (objetos con propiedad length o elementos indexados).
  • Objetos iterables (objetos de los cuales se pueden obtener sus elementos como Map y Set).

Array.from() tiene un parámetro opcional mapFn, que te permite ejecutar una función map  a cada elemento del array (o a la subclase del objeto) que se ha creado. Para aclararlo, Array.from(obj, mapFn, thisArg) es igual que Array.from(obj).map(mapFn, thisArg), excepto en que éste no crea un array intermedio. Esto es importante para ciertas subclases de array, vectores tipados, ya que el vector intermedio necesitaría tener valores truncados para trabajar con el tipo adecuado.

La propiedad length del método from() es 1.

En ES2015, la sintaxis de clase permite la subclasificación de clases integradas y definidas por el usuario; como resultado, los métodos estáticos como Array.from son "heredados" por subclases de Array y crean nuevas instancias de la subclase, no Array.

Ejemplos

Array desde un String

Array.from("foo");
// ["f", "o", "o"]

Array desde un Set

var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]

Array desde un Map

var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
// [[1, 2], [2, 4], [4, 8]]

Array desde un objeto Array-like (argumentos)

Se dice que un objeto es array-like (similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son números y en particular tiene una propiedad llamada length. Este hecho  hace  suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo. 

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [1, 2, 3]

Usando una función de flecha y Array.from

// Usando una función de flecha como función
// para manipular los elementos
Array.from([1, 2, 3], x => x + x);      
// [2, 4, 6]


// Generar secuencia de números
// Puesto que el array se inicializa con `undefined` en cada posición,
// el valor de `v` a continuación será `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

Polyfill

Array.from fue añadido en el estándar ECMA-262 en la 6ta edición (ES2015); así que no puede estar presente en otras implementaciones del estándar. Puedes usarlo insertando este código al comienzo de sus scripts, permitiendo el uso de Array.from en implementaciones que no lo soportan. Este algoritmo es el mismo especificado en ECMA-262, 6ta edición, suponiendo que Object y TypeError tengan sus valores originales y callback.call evalúa el valor original de Function.prototype.call. Adicionalmente, ya que verdaderos iterables pueden no ser polyficados, esta implementación no soporta iterables genéricos como definidos en la 6ta edición de ECMA-262.

// Pasos de producción de ECMA-262, Edición 6, 22.1.2.1
// Referencia: 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);
    };

    // La propiedad length del método from es 1.
    return function from(arrayLike/*, mapFn, thisArg */) {
      // 1. Deje a C ser el este valor.
      var C = this;

      // 2. Deje que los elementos sean ToObject(arrayLike).
      var items = Object(arrayLike);

      // 3. Retornar IfAbrupt(items).
      if (arrayLike == null) {
        throw new TypeError("Array.from requiere un objeto array-like - not null or undefined");
      }

      // 4. Si mapfn no está definida, entonces deja que sea false.
      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;
      if (typeof mapFn !== 'undefined') {
        // 5. si no
        // 5. a If IsCallable(mapfn) es false, lanza una excepción TypeError.
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: si hay mapFn, el segundo argumento debe ser una función');
        }

        // 5. b. Si thisArg se suministró, deje que T sea thisArg; si no, deje que T esté indefinido.
        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;
    };
  }());
}

Especificaciones

Especificación Estado Comentario
ECMAScript 2015 (6th Edition, ECMA-262)
La definición de 'Array.from' en esta especificación.
Standard Definición inicial.
ECMAScript Latest Draft (ECMA-262)
La definición de 'Array.from' en esta especificación.
Draft  

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Soporte básicoChrome Soporte completo 45Edge Soporte completo SiFirefox Soporte completo 32IE Sin soporte NoOpera Soporte completo SiSafari Soporte completo 9WebView Android ? Chrome Android Soporte completo SiEdge Mobile Soporte completo SiFirefox Android Soporte completo 32Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android Soporte completo Sinodejs Soporte completo 4.0.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, Aldomolina, GiuMagnani, joakku, thzunder
Última actualización por: lajaso,