JavaScript - map，filter，reduce。从数组转换为更深的树

时间：2018-06-06 06:01:01

标签： javascript lodash

每个视频都有一个有趣的时刻集合，每个集合代表截图有趣或代表整个标题的时间。请注意，boxart和interestingMoments数组都位于树中的相同深度。使用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) 同时检索中间有趣时刻和最小框艺术网址的时间。为每个视频返回{id，title，time，url}对象。 任何人都可以提供帮助 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？

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)

解决方案结果 screenshot_commit_change

解决方案与sudo apt-get install curl - Lodash 

{{1}}

2 个答案:

答案 0 :(得分：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);

答案 1 :(得分：1)

如果JSON.parse用于获取数据，则缩减版本（双关语）：

var result = [], j = '[{"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,"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,"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,"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,"interestingMoments":[{"type":"End","time":45632456},{"type":"Start","time":234534},{"type":"Middle","time":3453434}]}]}]';

JSON.parse(j, (k, v) => !v.id ? v : result.push({ id: v.id, title: v.title,
  url: v.boxarts.reduce((a, b) => a.width * a.height < b.width * b.height ? a : b).url, 
  time: v.interestingMoments.find(m => m.type === "Middle").time }));

console.log( result );

相关问题
最新问题