javascript - 用两种不同的方式编写函数 : one way results in a TypeError and the other does not. 为什么？

Question

我遇到了一个问题，我不明白发生了什么。设置如下:用户进入屏幕并输入姓氏。我获取姓氏并搜索电话簿(当用户进入屏幕时，整个电话簿已被检索，因此它只是作为一个大而胖的 JavaScript 数组坐在那里)。

假设电话簿对象的每个元素都包含:姓氏、名字和电话号码。现在，我将获取用户输入的姓氏，并在电话簿中循环查找匹配的姓氏。然后，我将每个匹配元素推送到一个数组中，并将该数组显示给用户。

我已经用两种不同的方式编写了执行此操作的方法。第一种方式返回对象列表。第二种方式(我的偏好)会抛出 TypeError 。

这是第一种方法

$scope.getMatchingLastNames = function(){
for(i=0; i<$scope.phoneBook.length; i++){
    if($scope.lastName==$scope.phoneBook[i].lastName){
          $scope.filteredArray.push($scope.phoneBook[i]);  
    }
};

第二种方法:

$scope.getList = function(){
    $scope.filteredArray = getLastNames($scope.lastName, 
       $scope.phoneBook, $scope.phoneBook.length);
}

哪个调用

function getLastNames(lastName, phoneBook, length)
{
    var filteredArray = [];
    for(var i=0; i<length; i++){
        if(lastName==phoneBook[i].lastName){
            filteredArray.push(phoneBook[i]);  
        }
    }
    return filteredArray;
}

当我运行第二种方法时，我会在 Chrome 控制台中收到如下错误:

TypeError:  Cannot read property 'lastName' of undefined 

错误指向if条件:

if(lastName==phoneBook[i].lastName)

有人可以向我解释为什么第二种方法会导致错误吗？

谢谢。

Answer 1

由于您想要实现的是过滤结果列表，因此我建议您使用 angularJs 过滤器

我为你准备了一个jsfiddle，并举了一个简单的例子: https://jsfiddle.net/fb0r7z0q/

这是关键行:

<li ng-repeat="entry in phonebook | filter:qname">

qname 是您的 $scope.lastName