Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

Il metodo Array.from() crea una nuova istanza Array da un oggetto di tipo array o iterabile.

Parameters

arrayLike
Un oggetto di tipo array o iterabile da convertire in array.
mapFn Optional
Funzione da eseguire su ogni elemento dell'array.
thisArg Optional
Valore da usare come this per l'esecuzione di mapFn.

Return value

Una nuova istanza Array.

Descrizione

Array.from() permette di creare Arrays da:

  • oggetti di tipo array (oggetti con la proprietà  length ed elementi indicizzati) o
  • iterable objects (oggetti di cui si possono ottenere gli elementi, come Map o Set).

Array.from() ha un parametro opzionale mapFn, che permette di eseguire una map funzione su ogni elemento dell'array (o oggetto derivato) che viene creato. Più esplicitamente, Array.from(obj, mapFn, thisArg) ritorna lo stesso risultato di Array.from(obj).map(mapFn, thisArg), ma non crea un array temporaneo. Questo è di particolare importanza per certe classi derivate (subclasses) di array, come typed arrays, poichè l'array temporaneo avrebbe necessariamente valori 'troncati' per essere compatibili con il tipo appropriato.

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

In ES2015, la sintassi di classe permette di derivare (subclassing) sia da classi predefinite (built-in), sia definite dall'utente; quindi, metodi statici come Array.from sono "ereditati" dalle classi derivate (subclasses) da Array e creano nuove istanze della classe derivata, e non Array.

Examples

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 un Map

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

Array da un oggetto di tipo Array (arguments)

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

f(1, 2, 3);

// [1, 2, 3]

Come usare 'arrow functions' e Array.from

// Come usare una 'arrow function' come funzione di corrispondenza per
// modificare gli elementi
Array.from([1, 2, 3], x => x + x);      
// [2, 4, 6]


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

Polyfill

Array.from è stato aggiunto allo standard ECMA-262 alla 6° edizione (ES2015); perciò potrebbe non essere non essere presente in altre implementazioni di tale standard. E' possibile risolvere il problema inserendo il codice seguente all'inizio dei vostri scripts, così da permettere l'uso di Array.from nelle implementazioni che non lo supportano nativamente. Questo algoritmo è esattamente quello specificato in ECMA-262, 6° edizione, assumendo che Object e TypeError abbiano i loro valori originali che callback.call venga valutata al valore originale di Function.prototype.call. In aggiunta, poichè i 'true iterables' non possono essere 'polyfilled', questa implementazione non supporta 'generic iterables' come definiti nella 6° 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;
    };
  }());
}

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.from' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.from' in that specification.
Draft  

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support45 Yes32 No Yes9
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? Yes Yes32 Yes Yes Yes

See also

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: CapelliC
Ultima modifica di: CapelliC,