对象不支持属性或方法“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浏览器出现的问题？

- Zabs

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;
    }
  });
}

您可以在此处找到更多详细信息。

- rick

---

如果您需要更多信息，请随时询问 ;) - rick

我强烈建议不要扩展内置对象。相反，你应该使用一个继承自 Array.prototype 的自己的 prototype。 - NonPolynomial

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;
}));

- NonPolynomial

Answer 3

你也可以通过另一种方式获取索引，例如：

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

等价于：

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

除了IE9+支持indexOf和filter外，其他都不支持。

- Ozzy

Answer 4

对于那些在IE浏览器中使用Angular（>=2）应用程序时遇到此错误的人，如果您使用angular cli创建应用程序，则会在src目录或由Angular cli创建的源文件根目录中找到polyfills.ts文件，请查找并取消注释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';

- Dipendu Paul