javascript - 数组过滤后，对象属性无法引用？

Question

我有以下 Angular Controller :

app.controller('VideoCtrl', function($scope, $stateParams, $sce) {
$scope.videos = [
    {
        id: 1,
        title: 'Balance Training',
        source: 'http://powersk01.uic-chp.org/balance.mp4'
    },
    {
        id: 2,
        title: 'Pipette Training',
        source: 'http://powersk01.uic-chp.org/pipette.mp4'
    },
    {
        id: 3,
        title: 'Titration Training',
        source: 'http://powersk01.uic-chp.org/titration.mp4'
    }
];

$scope.video = $scope.videos.filter(function(video) {
    return video.id == $stateParams.videoId;
});
});

在 View 中我尝试显示视频标题:

<ion-view view-title="Video">
    <ion-content>
        <h1>{{ video.title }}</h1>
    </ion-content>
</ion-view>

但由于某种原因，video.title 未定义。我可以在过滤视频后放置一个调试点，即使控制台输出对象并显示可用的属性，我也无法引用它们。我尝试过 video.title 和 video["title"]。

但是这确实有效:

$scope.video = $scope.videos[0];

知道为什么我过滤后会发生这种情况吗？

Answer 1

Array 对象的 filter() 方法返回一个通过过滤器的所有元素的子数组，而不是单个对象:

[1,2,3,4].filter(function(number) { return number > 2 })
 [3, 4]

这就是为什么从调用 filter() 返回的值不具有您想要的属性的原因。另一方面，find() 方法返回第一个通过测试的元素:

[1,2,3,4].find(function(number) { return number > 2 })
 3

使用find()代替filter()，或者使用.filter()[0]来获取第一个元素。