JavaScript - 映射、过滤、缩减。从数组转换为更深层次的树

Question

每个视频都有一个有趣的时刻集合，每个时刻代表一个截屏有趣的时间或代表整个标题的时间。请注意，boxarts 和 interestingMoments 数组都位于树中的相同深度。使用 Array.zip() 同时检索中间有趣时刻的时间和最小的盒子艺术 url。为每个视频返回一个 {id, title, time, url} 对象。 任何人都可以帮助 Array.zip() ?

const movieLists = [
    {
        name: "New Releases",
        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,
                "interestingMoments": [
                    { type: "End", time: 213432 },
                    { type: "Start", time: 64534 },
                    { type: "Middle", time: 323133 }
                ]
            },
            {
                "id": 654356453,
                "title": "Bad Boys",
                "boxarts": [
                    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
                    { width: 140, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }

                ],
                "url": "http://api.netflix.com/catalog/titles/movies/70111470",
                "rating": 5.0,
                "interestingMoments": [
                    { type: "End", time: 54654754 },
                    { type: "Start", time: 43524243 },
                    { type: "Middle", time: 6575665 }
                ]
            }
        ]
    },
    {
        name: "Instant Queue",
        videos: [
            {
                "id": 65432445,
                "title": "The Chamber",
                "boxarts": [
                    { width: 130, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
                    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
                ],
                "url": "http://api.netflix.com/catalog/titles/movies/70111470",
                "rating": 4.0,
                "interestingMoments": [
                    { type: "End", time: 132423 },
                    { type: "Start", time: 54637425 },
                    { type: "Middle", time: 3452343 }
                ]
            },
            {
                "id": 675465,
                "title": "Fracture",
                "boxarts": [
                    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
                    { width: 120, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
                    { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
                ],
                "url": "http://api.netflix.com/catalog/titles/movies/70111470",
                "rating": 5.0,
                "interestingMoments": [
                    { type: "End", time: 45632456 },
                    { type: "Start", time: 234534 },
                    { type: "Middle", time: 3453434 }
                ]
            }
        ]
    }
];

Array.zip = function(boxarts, interestingMoments, combinerFunction) {
    let counter,
        results = [];

    for(counter = 0; counter < Math.min(boxarts.length, interestingMoments.length); counter++) {
        results.push(combinerFunction(boxarts[counter],interestingMoments[counter]));
    }

    return results;
};


let arr1 = movieLists.map(function(movieList) {
    return movieList.videos.map(function(video) {
        return Array.zip(
            video.boxarts.reduce(function(acc,curr) {
                if (acc.width * acc.height < curr.width * curr.height) {
                        return acc;
                }
                else {
                      return curr;
                }
              }),
            video.interestingMoments.filter(function(interestingMoment) {
                return interestingMoment.type === "Middle";
            }),
              function(boxart, interestingMoment) {
                return {id: video.id, title: video.title, time: interestingMoment.time, url: boxart.url};
              });
    });
});

// //to enable deep level flatten use recursion with reduce and concat
let concatArr = (function flattenDeep(arr1) {
    return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
})(arr1);

console.log(concatArr)

没有 Array.zip() 的解决方案。 任何人都可以帮助 Array.zip() ?

let arr1 = movieLists.map(function (movieList) {
    return movieList.videos.map(function (v) {
        return {
            id: v.id,
            title: v.title,
            time: v.interestingMoments
                .reduce(function (accumulator, currentValue) {
                    if (currentValue.type === "Middle") {
                        return accumulator = currentValue
                    }
                }).time,
            url: v.boxarts.reduce((accumulator, currentValue) => {
                var area = currentValue.width * currentValue.height;
                if (area < accumulator.area) {
                    return { area: area, url: currentValue.url };
                }
                return accumulator;
            }, { area: 10000000, url: '' }).url
        }
    });
});

let concatArr = (function flattenDeep(arr1) {
    return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
})(arr1);

console.log(concatArr) 

求解结果

解决方案 _.zipWith - Lodash

var _ = require('lodash');

    let arr1 = movieLists.map(function(movieList) {
        return movieList.videos.map(function(video) {
            return _.zipWith(
                [video.boxarts.reduce(function(acc,curr) {
                    if (acc.width * acc.height < curr.width * curr.height) {
                            return acc;
                    }
                    else {
                          return curr;
                    }
                  })],
                video.interestingMoments.filter(function(interestingMoment) {
                    return interestingMoment.type === "Middle";
                }),
                  function(boxart, interestingMoment) {
                    return {id: video.id, title: video.title, time: interestingMoment.time, url: boxart.url};
                  });
        });
    });

    //to enable deep level flatten use recursion with reduce and concat
    let concatArr = (function flattenDeep(arr1) {
        return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
    })(arr1);

    console.log(concatArr)

Answer 1

你的代码没必要写的那么复杂。一个简单的 find 和 reduce 来确定最大的区域就足够了:

var result = movieLists[0].videos.map(v => {
   return {
     id: v.id,
     title: v.title,
     time: v.interestingMoments.find(m => m.type === "Middle").time,
     url: v.boxarts.reduce( (p,c) => {
         var area = c.width*c.height;
         if(area < p.area){
           return {area:area, url: c.url};
         }
         return p;
     },{area:10000000, url:''}).url
   }
});

下面的实例:

const movieLists = [
    {
        name: "New Releases",
        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,
                "interestingMoments": [
                    { type: "End", time: 213432 },
                    { type: "Start", time: 64534 },
                    { type: "Middle", time: 323133 }
                ]
            },
            {
                "id": 654356453,
                "title": "Bad Boys",
                "boxarts": [
                    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
                    { width: 140, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }

                ],
                "url": "http://api.netflix.com/catalog/titles/movies/70111470",
                "rating": 5.0,
                "interestingMoments": [
                    { type: "End", time: 54654754 },
                    { type: "Start", time: 43524243 },
                    { type: "Middle", time: 6575665 }
                ]
            }
        ]
    },
    {
        name: "Instant Queue",
        videos: [
            {
                "id": 65432445,
                "title": "The Chamber",
                "boxarts": [
                    { width: 130, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
                    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }
                ],
                "url": "http://api.netflix.com/catalog/titles/movies/70111470",
                "rating": 4.0,
                "interestingMoments": [
                    { type: "End", time: 132423 },
                    { type: "Start", time: 54637425 },
                    { type: "Middle", time: 3452343 }
                ]
            },
            {
                "id": 675465,
                "title": "Fracture",
                "boxarts": [
                    { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
                    { width: 120, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
                    { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }
                ],
                "url": "http://api.netflix.com/catalog/titles/movies/70111470",
                "rating": 5.0,
                "interestingMoments": [
                    { type: "End", time: 45632456 },
                    { type: "Start", time: 234534 },
                    { type: "Middle", time: 3453434 }
                ]
            }
        ]
    }
];
var result = movieLists[0].videos.map(v => {
   return {
     id: v.id,
     title: v.title,
     time: v.interestingMoments.find(m => m.type === "Middle").time,
     url: v.boxarts.reduce( (p,c) => {
         var area = c.width*c.height;
         if(area < p.area){
           return {area:area, url: c.url};
         }
         return p;
     },{area:10000000, url:''}).url
   }
});

console.log(result);