Il metodo Array.from() crea una nuova istanza Array copiata superficialmente da un oggetto array-like o iterabile.

Sintassi

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

Parametri

arrayLike
Un oggetto array-like o iterabile da convertire in un array.
mapFn Optional
Funzione map per chiamare su ogni elemento dell'array.
thisArg Optional
Valore da utilizzare come this quando mapFn viene eseguita.

Valore di ritorno

Una nuova istanza Array.

Descrizione

Array.from() consente di creare Array da:

  • oggetti array-like (oggetti con una proprietà length ed elementi indicizzati) o
  • oggetti iterabili (oggetti in cui è possibile ottenere i suoi elementi, come ad esempio Map e Set).

Array.from() ha un parametro opzionale mapFn, che ti permette di eseguire una funzione map su ogni elemento dell'array (o dell'oggetto sottoclasse) che si sta creando. Più chiaramente, Array.from(obj, mapFn, thisArg) ha lo stesso risultato di Array.from(obj).map(mapFn, thisArg), tranne che non crea un array intermedio. Questo è particolarmente importante per alcune sottoclassi di array, come gli array tipizzati, poiché l'array intermedio avrebbe necessariamente valori troncati per adattarsi al tipo appropriato.

La proprietà length del metodo from() è 1.

In ES2015, la sintassi della classe consente la sottoclassificazione di entrambe le classi predefinite e definite dall'utente; di conseguenza, i metodi statici come Array.from sono "ereditati" dalle sottoclassi di Array e creano nuove istanze della sottoclasse, non Array.

Esempi

Array da una String

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

Array da un Set

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

Array da una Map

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

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

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

Array di un oggetto Array-like (arguments)

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

f(1, 2, 3);

// [1, 2, 3]

Utilizzo delle funzioni a freccia e Array.from

// Utilizzando una funzione freccia come funzione map
// per manipolare gli elementi
Array.from([1, 2, 3], x => x + x);      
// [2, 4, 6]


// Genera una sequenza di numeri
// Poiché l'array è inizializzato con `undefined` su ogni posizione,
// il valore di `v` sotto sarà `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

Generatore di sequenze (range)

// Funzione del generatore di sequenze (comunemente denominata "range", ad esempio Clojure, PHP ecc.)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step }, (_, i) => start + (i * step));

// Genera numeri range 0..4
range(0, 5, 1);
// [0, 1, 2, 3, 4]

// Genera l'alfabeto usando Array.from facendolo usare come sequenza
range('A'.charCodeAt(0), 'Z'.charCodeAt(0) + 1, 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 è stato aggiunto allo standard ECMA-262 nella sesta edizione (ES2015); in quanto tale potrebbe non essere presente in altre implementazioni dello standard. È possibile aggirare questo problema inserendo il seguente codice all'inizio degli script, consentendo l'uso di Array.from in implementazioni che non lo supportano in modo nativo. Questo algoritmo è esattamente quello specificato in ECMA-262, 6a edizione, assumendo che Object e TypeError abbiano i loro valori originali e che callback.call valuti il valore originale di Function.prototype.call. Inoltre, poiché i veri iterabili non possono essere polyfilled, questa implementazione non supporta iterables generici come definito nella sesta edizione di ECMA-262.

// Production steps of ECMA-262, Edition 6, 22.1.2.1
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;
    };
  }());
}

Specifiche

Specifica Stato Commento
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.from' in that specification.
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.from' in that specification.
Standard Definizione iniziale.

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
fromChrome Full support 45Edge Full support 12Firefox Full support 32IE No support NoOpera Full support YesSafari Full support 9WebView Android Full support 45Chrome Android Full support YesFirefox Android Full support 32Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yesnodejs Full support 4.0.0

Legend

Full support  
Full support
No support  
No support

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev, mdnwebdocs-bot, bolste, CapelliC
Ultima modifica di: IsibisiDev,