Array.from()

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

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

Array desde un Map

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

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

Array desde un objeto Array-like (argumentos)

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]

Generador de secuencia (rango)

// Funci贸n generadora de secuencia (com煤nmente llamado "rango", ej. Clojure, PHP, etc.)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

// Genera un rango de n煤meros entre 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Genera un rango de n煤meros entre 1..10 con saltos de 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generar el abecedario utilizando Array.from haciendo uso de que se ordena como secuencia
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

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 (ECMA-262)
La definici贸n de 'Array.from' en esta especificaci贸n.
Living Standard  

Compatibilidad con navegadores

BCD tables only load in the browser

Ver tambi茅n