为什么在我第二次遍历集合

Question

在我的函数/对象中我有

this.StatusMappings = [
   {
       Range: [Infinity*-1, 50],
       Color: 'red',
       Text: 'Just getting started - will require considerable time to complete.'
   },
   {
       Range: [50, 70],
       Color: 'yellow',
       Text: 'Incomplete - major gaps exist and completion will take some time.'
   },
   {
       Range : [70, 90],
       Color : 'yellgreen',
       Text : 'Partially completed - but some gaps remain which can be completed shortly.'
   },
   {
       Range: [90, Infinity],
       Color: 'green',
       Text: 'Fully completed - no additional work needed.'
   }
];

this.UpdateInfo = function ( $slider, newval )
{
    var color = this.StatusMappings.firstOrUndefined(function (map) {
        console.log("map.Range = "); console.log(map.Range);//TEST
        return map.Range[0] >= newval && map.Range[1] < newval;
    });
    $slider.closest('.slider').addClass(color);
}

并且奇怪的是，第一次调用UpdateInfo时，一切都按预期进行，而第二次出现

  

未捕获的TypeError：无法读取未定义的属性“0”

由于我//TEST，我发现它第一次有效：

顺便说一句，我的助手函数firstOrUndefined是

Array.prototype.firstOrUndefined = function ( unpred )
{
    for ( var i in this ) 
        if ( unpred(this[i]) )
            return this[i];          
}

Answer 1

在JavaScript中迭代Arrays时，使用for-in循环绝不是一个好主意。使用for循环迭代数组总是更好。 JavaScript中的for-in循环不仅访问Array成员，还访问Array原型属性和方法。我在JSFiddle中的测试表明我的假设是正确的，并且错误是由于Array.prototype.firstOrUndefined()扩展被传递到你的未经授权的函数，并且该函数没有0的属性。您可以通过将for-in循环更改为for循环来解决此问题。

Array.prototype.firstOrUndefined = function(unpred) {
  //Might be a good idea to validate unpred, too.
  if (typeof unpred === 'function') {
      for (var i = 0; i < this.length; i++)
        if (unpred(this[i]))
           return this[i];
  }
}

请参阅小提琴以供参考。

https://jsfiddle.net/7bdj6j92/2/

有关不应将for-in循环与JavaScript数组一起使用的原因的更多信息：StackOverflow Answer