ie11 尝试使用 flat() polyfill 方法会导致 polyfill 中出现错误

ie11 Attempt to use the method flat() polyfill causes error within the polyfill

我的代码中一直出现这样的错误

object does not support function or method split

导致错误的函数如下:

function convertSpecial(a,b,c) {
var aCopy = a.split("");
for (var i = 0; i < aCopy.length; i++) {
    if (aCopy[i].includes(b)) {
        if (c == '') {
            aCopy[i] = aCopy[i].replace(b,c);
        } else {
            aCopy[i] = aCopy[i].replace(b,c).split(' ');
            aCopy = aCopy.flat();
        }
    }
}

return aCopy;
}

我假设此错误是由于在我的代码中使用了 .flat() 而发生的。

然而,polyfill 也不起作用。我收到一条错误消息说 ;预计在这一行:

for (var el of array) {

下面的 Babel 修复也没有解决我的问题。使用下面,我仍然得到对象不支持方法拆分错误。

if (!Array.prototype.flat) {
Array.prototype.flat = function (depth) {
var flattened = [];

(function flat(array, depth) {
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = array[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var el = _step.value;

      if (Array.isArray(el) && depth > 0) {
        flat(el, depth - 1);
      } else {
        flattened.push(el);
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return != null) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }
})(this, Math.floor(depth) || 1);

return flattened;
};
}

那么可能是什么导致了我的问题?

Internet Explorer 不支持 ES6+ 功能,包括 for..of,因此给定的 polyfill 不起作用。

正在阅读proposal specification

  1. Let targetIndex be start.

  2. Let sourceIndex be 0.

  3. Repeat, while sourceIndex < sourceLen

数组从索引 0 开始迭代,递增 1 直到达到长度。因此,与其搞乱迭代器(IE 不理解 Symbol),不如使用普通的 for 循环来手动递增。

因为给定的 polyfill 依赖于 Array.isArray,请确保也对其进行 polyfill。

以下代码段在 IE11 上按预期运行:

console.log(
  [1, [2, 3]].flat()
);
<script>
// Also polyfill Array.isArray:
if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#Polyfill
if (!Array.prototype.flat) {
  Array.prototype.flat = function(depth) {
    var flattened = [];
    (function flat(array, depth) {
      for (var i = 0; i < array.length; i++) {
        var el = array[i];
        if (Array.isArray(el) && depth > 0) {
          flat(el, depth - 1); 
        } else {
          flattened.push(el);
        }
      }
    })(this, Math.floor(depth) || 1);
    return flattened;
  };
}
</script>

问题已解决!

function convertSpecial(a,b,c) {
var aCopy = a.toString().split("");
for (var i = 0; i < aCopy.length; i++) {
if (aCopy[i].includes(b)) {
    if (c == '') {
        aCopy[i] = aCopy[i].replace(b,c);
    } else {
        aCopy[i] = aCopy[i].replace(b,c).toString().split(' ');
        aCopy = aCopy.flat();
    }
}
}

return aCopy;
}