首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JavaScript -映射、过滤、缩减。从数组到更深的树的转换

JavaScript -映射、过滤、缩减。从数组到更深的树的转换
EN

Stack Overflow用户
提问于 2018-06-06 14:01:01
回答 2查看 89关注 0票数 1

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

代码语言:javascript
复制
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()吗?

代码语言:javascript
复制
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的SOLUTION - Lodash

代码语言:javascript
复制
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)
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-06 16:34:18

没有必要让你的代码如此复杂。目前,一个简单的find和用于确定最大区域的reduce就足够了:

代码语言:javascript
复制
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
   }
});

下面是一个实例:

代码语言:javascript
复制
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
EN

Stack Overflow用户

发布于 2018-06-07 12:09:20

精简版(双关语)如果使用JSON.parse获取数据:

代码语言:javascript
复制
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 );

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50713156

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档