对象不支持属性或方法 'findIndex' IE11 javascript 问题

Question

我有一个 AngularJS 应用程序在 Internet Explorer 11 中给我一些问题 - 在我的管理区域中，我收到控制台日志错误，这些错误似乎与我在带有过滤的页面中注意到的一些问题相关使用 Internet Explorer（特别是版本 11）时的数据，但在 Chrome/Firefox 等

中很好

Object doesn't support property or method 'findIndex' 
at Anonymous function (http://myapp.local/js/controllers/admin/UsersController.js:363:9)

当我导航到代码中的这一行时，这是有问题的部分:-

[363]   var indexInOriginalSet = $scope.originalSet.findIndex(function(u) {
[364]        return u.id == userId;
[365]   });

使用 findIndex 修复此 IE 问题的最佳解决方案是什么？

Answer 1

你可以使用 polyfill，特别是这个：

// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
  Object.defineProperty(Array.prototype, 'findIndex', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return k.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return k;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return -1.
      return -1;
    }
  });
}

您可以找到更多详细信息here

Answer 2

我写了一个小函数来做你想要的。它需要一个数组作为第一个参数，一个 filter-回调作为第二个参数。

var findIndex = function(arr, fn) {
    return arr.reduce(function(carry, item, idx) {
        if(fn(item, idx)) {
            return idx;
        }

        return carry;
    } , -1);
};

console.log(findIndex(arr, function(u) {
    return u.id == userId;
}));

Answer 3

对于那些在 IE 上的 Angular (>=2) 应用程序中遇到此错误的用户，如果您使用 angular cli 创建应用程序，您会发现文件 polyfills.ts 在 src 目录或由 Angular cli 创建的源文件的根目录中，在 polyfills.ts:

中找到并取消注释以下导入语句

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

Answer 4

您也可以通过其他方式获取索引，例如

const indexInOriginalSet = $scope.originalSet.findIndex(u => u.id == userId);

相当于：

const indexInOriginalSet = $scope.originalSet.indexOf(
    originalSet.filter(u => u.id == userId)[0];
);

除了 indexOf 和 filter 在 IE9+ 中受支持

对象不支持属性或方法 'findIndex' IE11 javascript 问题

object doesn't support property or method 'findIndex' IE11 javascript issue

javascript

internet-explorer

internet-explorer-11

对象不支持 属性 或方法 'findIndex' IE11 javascript 问题

object doesn't support property or method 'findIndex' IE11 javascript issue

javascript

internet-explorer

internet-explorer-11

对象不支持属性或方法 'findIndex' IE11 javascript 问题