javascript - 使用 map()、filter() 和 concatAll() 函数提取 Javascript 数据

Question

输出几乎是正确的，但我无法展平嵌套的 boxart 数组。

Javascript 数据:

var movieLists = {
    name: "Instant Queue",
    videos : [
        {    
             "id": 70111470,
             "title": "Die Hard",
             "boxarts": [
                 {width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"}, 
                 {width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg"}
             ],
            "url": "http://api.netflix.com/catalog/titles/movies/70111470",
            "rating": 4.0,
            "bookmark": [{ id:432534, time:65876586 }]
        },
        {
            "id": 654356453,
            "title": ....,
        }];

预期输出:(仅使用函数.map()、.filter()、.concatAll(), 返回 id, title, boxart: boxart 图像尺寸为 150x200 的电影的 url

// [
//     {"id": 675465,"title": "Fracture","boxart":"http://cdn-0...." },
//     {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0...." },
//     {"id": 654356453,...}
// ];

当前输出:

// [                                    //boxart value is an array
//     {"id": 675465,"title": "Fracture","boxart":["http://cdn-0...."]},
//     {"id": 65432445,"title": "The Chamber","boxart":["http://cdn-0...."]},
//     {"id": 654356453,...}
// ];

我的解决方案:

return movieLists.map(function (category) {
   return category.videos.map(function (video) {
       return {
           id: video.id,
           title: video.title,
           boxart: video.boxarts.filter(function (boxartFeature) {
               return boxartFeature.width === 150 && boxartFeature.height === 200;
           })
               .map(function (boxartProp) {
               return boxartProp.url;
           })
       };
   });
 }).concatAll(); //Flattens nested array by 1 dimension (please see demo)

我知道我需要应用 .concatAll() 函数来删除嵌套的 boxart 数组，但我似乎找不到位置。

请点击here for demo

Answer 1

你们很亲近。我认为这是 Observables 的练习。因为您正在研究 RxJS，所以您不使用索引很重要 --> [0]。在处理 Observables 时没有索引的概念。

理解这个问题的诀窍是仔细观察 concatAll() 正在做什么。它需要一个二维数组并返回一个展平的数组。

[[1,2],[3,4]] --> [1,2,3,4]

使用您当前的代码，您正在将 boxartProp.url 映射到一个嵌套数组，但您的其余属性不是。您现在或多或少拥有的是:[1,2,3,[4]]。您想要的是一个均匀嵌套的数组:[[1],[2],[3],[4]]。之所以重要是因为 concatAll() 期望每个成员都是一个子数组。如果您还没有看过，我建议您观看 this video贾法尔侯赛因。他很了不起，在视频中从头开始实现了 concatAll。

只需进行一些小调整即可实现您的目标。

return movieLists.map(function(category) {
    return category.videos.map(function(video) {
        return video.boxarts.filter(function(boxart) {
            return boxart.width === 150;
        }).map(function(boxart) {
            return {id: video.id, title: video.title, boxart: boxart.url};
        });
    }).concatAll();
}).concatAll();

请注意，在最后一张 map 中，我们不仅将 boxart url 映射了，还传递了视频数据。这为我们提供了运行 concatAll() 所需的均匀嵌套数组。

我们必须调用 concatAll() 两次的原因是您的视频嵌套在演示中的类别中。第一个调用将电影扁平化，第二个调用将类别扁平化。

Here is the modified jsbin for your review .

这些是需要进行的一些很好的练习。祝你好运!