首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

array.from js

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

基础概念

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

语法

代码语言:txt
复制
Array.from(arrayLike[, mapFn[, thisArg]])
  • arrayLike:想要转换成数组的伪数组对象或可迭代对象。
  • mapFn(可选):如果指定了该参数,新数组中的每个元素会执行该回调函数。
  • thisArg(可选):执行 mapFn 时使用的 this 值。

类型

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

应用场景

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

示例代码

代码语言:txt
复制
// 类数组对象转数组
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 中引入的新特性,一些较旧的浏览器版本可能不支持。

解决方法

  1. 使用 Polyfill:可以通过引入 polyfill 来为不支持 Array.from() 的浏览器提供兼容性支持。
代码语言:txt
复制
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;
    };
  }());
}
  1. 使用 Babel 转译:如果你在使用构建工具(如 Webpack 或 Rollup),可以利用 Babel 将 ES6+ 代码转译为 ES5 代码,从而兼容更多浏览器。

通过这些方法,可以确保 Array.from() 在不同环境中的可用性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

共10个视频
尚硅谷JS模块化教程/视频/视频.zip/视频
腾讯云开发者课程

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券