MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Array.from()

Array.from() 會從類陣列(array-like)或是可迭代的物件建立一個新的陣列實例。

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

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

語法

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

參數

arrayLike
被轉換至陣列的類陣列獲釋可迭代的物件。
mapFn 選擇性
Map 函式走訪陣列中的每一個元素。
thisArg 選擇性
mapFn 函式執行時的 this 對象。

回傳值

一個新的 Array 實例。

描述

Array.from() 讓你從這些物件建立陣列:

  • 類陣列物件 (物件具有 length 屬性以及已被索引化的元素) 或
  • 可迭代的物件 (物件具有可以讓你利用迭代的方式取得它自己本身的元素,像是 MapSet)。

Array.from() 有個可選用的參數 mapFn,它允許你在建立出新的陣列實例之後,可以接著對陣列(或是子類別物件)中的每一個元素執行 map 函式。更清楚地說,Array.from(obj, mapFn, thisArg) 跟 Array.from(obj).map(mapFn, thisArg)的結果是一樣的,除非所建立的不是一個可用的中介陣列。這對於某些陣列的子類別來說就很重要,例如 typed arrays ,因為中介陣列必須要把內容值做一番截頭去尾的操作來讓它們變成適合的物件型態。

from() 函式的 length 為 1。

在 ES2015,類別語法允許原生內建的物件以及使用者自定義的物件可以被次類別化(sub-classing); 因此,靜態方法像是 Array.from,是"繼承"了陣列的子類別後,然後建立新的子類別的實例,而不是建立 Array 本身。

範例

從字串產生陣列

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

從集合產生陣列

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

從映射產生陣列

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

從類陣列物件(引數)產生陣列

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

f(1, 2, 3);

// [1, 2, 3]

使用箭頭函式及 Array.from

// 使用箭頭函式作為 map 函式來操作元素
Array.from([1, 2, 3], x => x + x);      
// [2, 4, 6]


// 產生數值序列
// 因為陣列中的每個位置都會被初始化為 `undefined`,
// 下方 `v` 會是 `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

Polyfill

Array.from 在 ECMA-262 標準第六版(ES2015)被加入; 在某些實作可能尚未被支援。你可以將下面的程式碼插入到妳的 script 的最前面,如果你使用的工作環境不具有原生支援 Array.from 的能力。這個演算法根據 ECMA-262 第六版中的規範實現,假定 ObjectTypeError 它們本身已具有值且 callback.call 對應到原本 Function.prototype.call 的值。除此之外,因為 Polyfill 無法實現真正的迭代,這個實作不支援 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;
    };
  }());
}

規格

規格 狀態 備註
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.from' in that specification.
Standard 首次定義。
ECMAScript 2017 Draft (ECMA-262)
The definition of 'Array.from' in that specification.
Draft  

瀏覽器相容性

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 45 32 (32) (Yes) No support (Yes) 9.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support (Yes) 32.0 (32) No support (Yes) (Yes)

請參閱

文件標籤與貢獻者

 此頁面的貢獻者: tericky
 最近更新: tericky,