Javascript 筛选数组后，是否无法引用对象属性？

我有以下角度控制器：

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

在视图中，我尝试显示视频标题：

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

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

对象的

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]

获取第一个元素。

filter

返回一个数组，而不是单个元素。我觉得很愚蠢，这就是问题所在。谢谢@JamesBuck

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