【问题标题】:Combining filter() and map () methods in javascript在javascript中结合filter()和map()方法
【发布时间】:2025-12-01 08:15:01
【问题描述】:

我一直在解决 Github 上的 study guide 问题,我正在尝试解决链过滤和映射以获得答案的问题。所以,我有一个数组,我应该使用这两种方法来选择评分为 5.0 的视频的 id。这是数组:

function() {
var newReleases = [
    {
        "id": 70111470,
        "title": "Die Hard",
        "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 4.0,
        "bookmark": []
    },
    {
        "id": 654356453,
        "title": "Bad Boys",
        "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 5.0,
        "bookmark": [{ id:432534, time:65876586 }]
    },
    {
        "id": 65432445,
        "title": "The Chamber",
        "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 4.0,
        "bookmark": []
    },
    {
        "id": 675465,
        "title": "Fracture",
        "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 5.0,
        "bookmark": [{ id:432534, time:65876586 }]
    }
];

现在我的代码如下:

  newReleases.filter(function(video){
    return video.rating == 5.0;
  }).map (function(video) {
    return { id: video.id } 
  });
}

我的思考过程是我首先调用 filter 方法并应用测试 (video.rating == 5.0) 并返回通过测试的元素。然后,我使用 map 方法对通过测试的元素应用一个函数,以返回我想要的内容,即评分为 5.0 的视频的 id,方法是让 map 返回“video.id”。现在当我执行时,我得到了这个错误:

TypeError: 'undefined' 不是一个对象(评估 'videoids.sortBy')

这个错误代码真的让我大吃一惊,因为我在数组中没有看到“videoids”变量,而且看起来我不需要应用.SortBy

所以我要求澄清错误代码。我还以多种不同的方式尝试了此代码,但没有提出正确的代码,因此我非常感谢您了解我没有做的事情。我对自己的代码有信心的原因是因为我在第 5 章末尾(练习 5.2 母子年龄差异)的 [Eloquent Javascript] 中应用了一个非常相似的代码。我已经花了几个小时(比我想承认的还要多)停留在这个问题上,并且我浏览了堆栈溢出大约两个小时。我可以轻松地按下获取答案按钮,但我担心这样做我不会学到任何东西。

有人可以帮助我吗?

【问题讨论】:

  • 您编写的代码运行良好 - jsfiddle.net/yvy06sn1 您的代码中一定有其他内容。
  • 也可以在 Chrome 上使用,您使用的是什么操作系统、浏览器版本?重新启动计算机,然后重试!
  • 我正在通过学​​习指南运行代码。我在野生动物园版上运行它。 6.1.3(不是我的电脑)。不幸的是,我尝试重新启动没有工作。感谢您的回复!
  • 我解决了。发生的事情与代码无关。这是两件事。首先,我运行的浏览器已经过时,它可能是归因于它。其次,这是我从 .map 回归的方向。我应该把'return video.id'而不是'return { id: video.id}'谢谢大家的cmets,有时候说出来会有所帮助。

标签: javascript arrays dictionary filter


【解决方案1】:

请添加return。否则你就是undefined 回来了。

return newReleases.filter(function(video) {
    //...

【讨论】:

  • 我添加了回报,但我不再得到未定义的。不过,浏览器仍然发现我的回答有问题。嗯,也许我应该尝试在学习指南之外的空浏览器上运行它。
  • 澄清一下,我的代码除了返回没有问题吗?
【解决方案2】:

你一定做错了什么,因为这对我有用。见https://jsfiddle.net/887mfh10/1/

var newReleases = [
    {
        "id": 70111470,
        "title": "Die Hard",
        "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 4.0,
        "bookmark": []
    },
    {
        "id": 654356453,
        "title": "Bad Boys",
        "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 5.0,
        "bookmark": [{ id:432534, time:65876586 }]
    },
    {
        "id": 65432445,
        "title": "The Chamber",
        "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 4.0,
        "bookmark": []
    },
    {
        "id": 675465,
        "title": "Fracture",
        "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
        "uri": "http://api.netflix.com/catalog/titles/movies/70111470",
        "rating": 5.0,
        "bookmark": [{ id:432534, time:65876586 }]
    }
];

var ids = newReleases.filter(function(video){
    return video.rating == 5.0;
  }).map (function(video) {
    return { id: video.id } 
  });

alert(JSON.stringify(ids)); // see console

【讨论】:

  • 谢谢阿米尔,这似乎是共识。我认为这可能与我的浏览器有关。我可以澄清我收到的错误代码吗?
  • 我想我刚刚回答了我自己的问题。由于我没有返回过滤器或在它前面声明一个变量,它返回的是未定义的,对吧?
最近更新 更多