在此页

• 句法
• 描述
• Polyfill
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

Array.from() static method creates a new, shallow-copied Array 实例从像数组或可迭代对象。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

句法

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

参数

arrayLike

An array-like or iterable object to convert to an array.

mapFn 可选

Map function to call on every element of the array.

thisArg 可选

Value to use as this when executing mapFn .

返回值

A new Array 实例。

描述

Array.from() lets you create Array s from:

• array-like objects (objects with a length property and indexed elements); or
• iterable objects (objects such as Map and Set ).

Array.from() has an optional parameter mapFn , which allows you to execute a map() function on each element of the array being created.

More clearly, Array.from( obj , mapFn , thisArg )
has the same result as Array.from( obj ).map( mapFn , thisArg ) ,
except that it does not create an intermediate array.

This is especially important for certain array subclasses, like typed arrays , since the intermediate array would necessarily have values truncated to fit into the appropriate type.

length 特性为 from() method is 1 .

In ES2015, the class syntax allows sub-classing of both built-in and user-defined classes. As a result, static methods such as Array.from() are "inherited" by subclasses of Array , and create new instances of the subclass , not Array .

Polyfill

Array.from() was added to the ECMA-262 standard in the 6 ^th Edition (ES2015). As such, it may not be present in other implementations of the standard.

You can work around this by inserting the following code at the beginning of your scripts, allowing use of Array.from() in implementations that don't natively support it.

Polyfill Notes: This algorithm is exactly as specified in ECMA-262 6 ^th Edition (assuming Object and TypeError have their original values and that callback .call() evaluates to the original value of Function.prototype.call() ).

In addition, since true iterables cannot be polyfilled, this implementation does not support generic iterables as defined in the 6 ^th Edition of ECMA-262.

// Production steps of ECMA-262, Edition 6, 22.1.2.1
if (!Array.from) {
    Array.from = (function () {
        var symbolIterator;
        try {
            symbolIterator = Symbol.iterator
                ? Symbol.iterator
                : 'Symbol(Symbol.iterator)';
        } catch {
            symbolIterator = 'Symbol(Symbol.iterator)';
        }
        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);
        };
        var setGetItemHandler = function setGetItemHandler(isIterator, items) {
            var iterator = isIterator && items[symbolIterator]();
            return function getItem(k) {
                return isIterator ? iterator.next() : items[k];
            };
        };
        var getArray = function getArray(
            T,
            A,
            len,
            getItem,
            isIterator,
            mapFn
        ) {
            // 16. Let k be 0.
            var k = 0;
            // 17. Repeat, while k < len… or while iterator is done (also steps a - h)
            while (k < len || isIterator) {
                var item = getItem(k);
                var kValue = isIterator ? item.value : item;
                if (isIterator && item.done) {
                    return A;
                } else {
                    if (mapFn) {
                        A[k] =
                            typeof T === 'undefined'
                                ? mapFn(kValue, k)
                                : mapFn.call(T, kValue, k);
                    } else {
                        A[k] = kValue;
                    }
                }
                k += 1;
            }
            if (isIterator) {
                throw new TypeError(
                    'Array.from: provided arrayLike or iterator has length more then 2 ** 52 - 1'
                );
            } else {
                A.length = len;
            }
            return A;
        };
        // The length property of the from method is 1.
        return function from(arrayLikeOrIterator /*, mapFn, thisArg */) {
            // 1. Let C be the this value.
            var C = this;
            // 2. Let items be ToObject(arrayLikeOrIterator).
            var items = Object(arrayLikeOrIterator);
            var isIterator = isCallable(items[symbolIterator]);
            // 3. ReturnIfAbrupt(items).
            if (arrayLikeOrIterator == null && !isIterator) {
                throw new TypeError(
                    'Array.from requires an array-like object or iterator - 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);
            return getArray(
                T,
                A,
                len,
                setGetItemHandler(isIterator, items),
                isIterator,
                mapFn
            );
        };
    })();
}
				

范例

Array from a String

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

Array from a Set

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

Array from a 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 from an Array-like object (arguments)

function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [ 1, 2, 3 ]
				

Using arrow functions and Array.from()

// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
				

Sequence generator (range)

// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));
// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]
// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]
// Generate the alphabet using Array.from making use of it being ordered as a sequence
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"]
				

规范

规范	初始发布
ECMAScript (ECMA-262) The definition of 'Array.from' in that specification.	ECMAScript 2015

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile						Server
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet	Node.js
from	Chrome 45	Edge 12	Firefox 32	IE No	Opera 32	Safari 9	WebView Android 45	Chrome Android 45	Firefox Android 32	Opera Android 32	Safari iOS 9	Samsung Internet Android 5.0	nodejs 4.0.0

图例

完整支持

完整支持

不支持

不支持

另请参阅

• Array
• Array.prototype.map()
• TypedArray.from()

元数据

• 最后修改： 2020 年 7 月 17 日

相关话题

1. 标准内置对象
2. Array
3. 特性
   1. Array.prototype.length
   2. Array.prototype[@@unscopables]
4. 方法
   1. Array.from()
   2. Array.isArray()
   3. Array.of()
   4. Array.prototype.concat()
   5. Array.prototype.copyWithin()
   6. Array.prototype.entries()
   7. Array.prototype.every()
   8. Array.prototype.fill()
   9. Array.prototype.filter()
   10. Array.prototype.find()
   11. Array.prototype.findIndex()
   12. Array.prototype.flat()
   13. Array.prototype.flatMap()
   14. Array.prototype.forEach()
   15. Array.prototype.includes()
   16. Array.prototype.indexOf()
   17. Array.prototype.join()
   18. Array.prototype.keys()
   19. Array.prototype.lastIndexOf()
   20. Array.prototype.map()
   21. Array.prototype.pop()
   22. Array.prototype.push()
   23. Array.prototype.reduce()
   24. Array.prototype.reduceRight()
   25. Array.prototype.reverse()
   26. Array.prototype.shift()
   27. Array.prototype.slice()
   28. Array.prototype.some()
   29. Array.prototype.sort()
   30. Array.prototype.splice()
   31. Array.prototype.toLocaleString()
   32. Array.prototype.toSource()
   33. Array.prototype.toString()
   34. Array.prototype.unshift()
   35. Array.prototype.values()
   36. Array.prototype[@@iterator]()
   37. get Array[@@species]
5. 继承：
6. Function
7. 特性
   1. Function.arguments
   2. Function.caller
   3. Function.displayName
   4. Function.length
   5. Function.name
8. 方法
   1. Function.prototype.apply()
   2. Function.prototype.bind()
   3. Function.prototype.call()
   4. Function.prototype.toSource()
   5. Function.prototype.toString()
9. Object
10. 特性
    1. Object.prototype.__proto__
    2. Object.prototype.constructor
11. 方法
    1. Object.prototype.__defineGetter__()
    2. Object.prototype.__defineSetter__()
    3. Object.prototype.__lookupGetter__()
    4. Object.prototype.__lookupSetter__()
    5. Object.prototype.hasOwnProperty()
    6. Object.prototype.isPrototypeOf()
    7. Object.prototype.propertyIsEnumerable()
    8. Object.prototype.toLocaleString()
    9. Object.prototype.toSource()
    10. Object.prototype.toString()
    11. Object.prototype.valueOf()
    12. Object.setPrototypeOf()