array.from js

Array.from() 是 JavaScript 中的一个静态方法，它可以从一个类似数组或可迭代的对象创建一个新的数组实例。

基础概念

Array.from() 方法从一个类似数组或可迭代的对象创建一个新的，浅拷贝的数组实例。

语法

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

arrayLike：想要转换成数组的伪数组对象或可迭代对象。
mapFn（可选）：如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg（可选）：执行 mapFn 时使用的 this 值。

类型

类数组对象：拥有 length 属性和索引元素的对象。
可迭代对象：实现了 [Symbol.iterator] 方法的对象。

应用场景

将类数组对象转换为数组：例如函数的 arguments 对象，或者通过 document.querySelectorAll 获取的 NodeList。
将字符串转换为数组：字符串在 JavaScript 中是可迭代的，因此可以用 Array.from() 将其转换为字符数组。
生成数值范围数组：结合使用 Array.from() 和映射函数可以方便地生成一个数值范围数组。

示例代码

// 类数组对象转数组
function demoFunction() {
    var arr = Array.from(arguments);
    console.log(arr); // 输出传入的参数组成的数组
}

demoFunction(1, 2, 3); // [1, 2, 3]

// 字符串转数组
var str = 'hello';
var arrFromStr = Array.from(str);
console.log(arrFromStr); // ['h', 'e', 'l', 'l', 'o']

// 生成数值范围数组
var range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => i + start);
console.log(range(1, 5)); // [1, 2, 3, 4, 5]

遇到的问题及解决方法

问题：`Array.from()` 在某些旧版浏览器中不被支持。

原因：Array.from() 是 ES6 中引入的新特性，一些较旧的浏览器版本可能不支持。

解决方法：

使用 Polyfill：可以通过引入 polyfill 来为不支持 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);
    };

    return function from(arrayLike/*, mapFn, thisArg */) {
      var C = this;
      var items = Object(arrayLike);
      if (arrayLike == null) {
        throw new TypeError('Array.from requires an array-like object - not null or undefined');
      }
      var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
      var T;
      if (typeof mapFn !== 'undefined') {
        if (!isCallable(mapFn)) {
          throw new TypeError('Array.from: when provided, the second argument must be a function');
        }
        if (arguments.length > 2) {
          T = arguments[2];
        }
      }
      var len = toLength(items.length);
      var A = isCallable(C) ? Object(new C(len)) : new Array(len);
      var k = 0;
      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;
      }
      A.length = len;
      return A;
    };
  }());
}