视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascriptfrom()方法将一个类数组对象转换成真实的数组
2020-11-27 20:32:24 责编:小采
文档

Array.from() 方法可以将一个类数组对象或可迭代对象转换成真实的数组。

from语法

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

from参数

参数 说明
arrayLike 想要转换成真实数组的类数组对象或可迭代对象。
mapFn 可选参数,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。
thisArg 可选参数,执行 mapFn 函数时 this 的值。

你可以使用 Array.from() 将下面的两种对象转换成数组:

  • 类数组对象(拥有一个 length 属性和若干索引属性的任意对象)
  • 可迭代对象(你可以从它身上迭代出若干个元素的对象,比如有 MapSet 等)
  • Array.from() 方法有一个可选参数 mapFn,让你可以在最后生成的数组上再执行一次 map 方法后再返回。也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg), 除非创建的不是可用的中间数组。 这对一些数组的子类,如 typed arrays 来说很重要, 因为中间数组的值在调用 map() 时需要是适当的类型。

    from()length 属性为 1 。

    from实例:

    // 将类数组对象(arguments)转换成数组
    (function () {
     var args = Array.from(arguments);
     return args;
    })(1, 2, 3); // [1, 2, 3]
    
    // 将可迭代对象(Set 对象)转换成数组
    Array.from(Set(["foo", window])); // ["foo", window]
    
    // Map 对象也可以
    var m = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(m); // [[1, 2], [2, 4], [4, 8]] 
    
    // 字符串对象既是类数组又是可迭代对象
    Array.from("foo"); // ["f", "o", "o"]
    
    // 使用 map 函数转换数组元素
    Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
    
    // 生成一个数字序列
    Array.from({length:5}, (v, k) => k); // [0, 1, 2, 3, 4]

    from兼容性解决方法

    ECMA-262 第六版标准添加了 Array.from 。有些实现中可能尚未包括。你可以通过在脚本前添加如下内容作为替代方法,以使用未原生支持的 Array.from 方法。该算法按照 ECMA-262 第六版中的规范实现,并假定ObjectTypeError 有其本身的值, callback.call 对应 Function.prototype.call 。此外,鉴于无法使用 Polyfill 实现真正的的迭代器,该实现不支持规范中定义的泛型可迭代元素。

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

    下载本文
    显示全文
    专题