[Javascript] Ex: concatAll, map and filter
concatAll:
Array.prototype.concatAll = function() {
var results = [];
this.forEach(function(subArray) {
// ------------ INSERT CODE HERE! ----------------------------
// Add all the items in each subArray to the results array.
// ------------ INSERT CODE HERE! ----------------------------
subArray.forEach(function(sub){
results.push(sub)
})
}); return results;
};
Exercise 12: Retrieve id, title, and a 150x200 box art url for every video
You've managed to flatten a tree that's two levels deep, let's try for three! Let's say that instead of a single boxart url on each video, we had a collection of boxart objects, each with a different size and url. Create a query that selects {id, title, boxart} for every video in the movieLists. This time though, the boxart property in the result will be the url of the boxart object with dimensions of 150x200px. Let's see if you can solve this problem with map(), concatAll(), and filter().
There's just more one thing: you can't use indexers. In other words, this is illegal:
var itemInArray = movieLists[0];
Furthermore, you're not allowed to use indexers in any of the remaining exercises unless you're implementing one of the five functions. There is a very good reason for this restriction, and that reason will eventually be explained. For now, you'll simply have to accept it on faith that this restriction serves a purpose. :-)
function() {
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": 654356453,
"title": "Bad Boys",
"boxarts": [
{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" } ],
"url": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id:432534, time:65876586 }]
}
]
},
{
name: "New Releases",
videos: [
{
"id": 65432445,
"title": "The Chamber",
"boxarts": [
{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber150.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,
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxarts": [
{ width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
{ width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture150.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,
"bookmark": [{ id:432534, time:65876586 }]
}
]
}
]; // Use one or more map, concatAll, and filter calls to create an array with the following items
// [
// {"id": 675465,"title": "Fracture","boxart":"http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
// {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg" },
// {"id": 654356453,"title": "Bad Boys","boxart":"http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg" },
// {"id": 70111470,"title": "Die Hard","boxart":"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }
// ]; return movieLists
.map(function(movieList){
return movieList.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()
}
You need to make sure you got everything you need to display. So there are three level deep. Any apply n-1 concatAll.
[Javascript] Ex: concatAll, map and filter的更多相关文章
- [Javascript] Chaining the Array map and filter methods
Both map and filter do not modify the array. Instead they return a new array of the results. Because ...
- JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- forEach、map、filter、find、sort、some等易错点整理
一.常用方法解析 说起数组操作,我们肯定第一反应就是想到forEach().map().filter()等方法,下面分别阐述一下各方法的优劣. 1.forEach 1.1 基础点 forEac ...
- C#数组的Map、Filter、Reduce操作
在Javascript.Python等语言里,Map.Filter和Reduce是数组的常用方法,可以让你在实现一些数组操作时告别循环,具有很高的实用价值.它们三个的意义大家应该都清楚,有一个十分形象 ...
- lodash 集合处理方法 map和filter区别
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- (八)map,filter,flatMap算子-Java&Python版Spark
map,filter,flatMap算子 视频教程: 1.优酷 2.YouTube 1.map map是将源JavaRDD的一个一个元素的传入call方法,并经过算法后一个一个的返回从而生成一个新的J ...
- python--函数式编程 (高阶函数(map , reduce ,filter,sorted),匿名函数(lambda))
1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层的函数,可以把复杂的任务分解成简单的任务,这种一步一步的分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...
- Swift函数编程之Map、Filter、Reduce
在Swift语言中使用Map.Filter.Reduce对Array.Dictionary等集合类型(collection type)进行操作可能对一部分人来说还不是那么的习惯.对于没有接触过函数式编 ...
- ES6新特性:Javascript中的Map和WeakMap对象
Map对象 Map对象是一种有对应 键/值 对的对象, JS的Object也是 键/值 对的对象 : ES6中Map相对于Object对象有几个区别: 1:Object对象有原型, 也就是说他有默认的 ...
随机推荐
- 8. Unity异常警告错误处理方法
一. The AnimationClip 'cube1_anim' used by the Animation component 'Cube1' must be marked as Legacy. ...
- 将一个字符串映射为一个Delphi页面控件属性名(通过FindComponent和GetPropInfo找到这个控件指针)
uses TypInfo; function TForm1.SetControlProp(ComStr, value: string): boolean; var ComName, ComProp: ...
- QML嵌入到QWidget中方法
简介 嵌入方法有两种一种是直接拖控件,另一种是cpp代码动态生成, 控件方式 动态代码生成 QQuickWidget *m_quickWidget=new QQuickWidget(); QUrl s ...
- SSO(转)
一.介绍 主站下有多个子系统,每次登录主系统,跳转到子系统时,又需要重新登录: 子系统与主系统都有各自的用户信息表:各个系统的用户角色.权限也各不相同: 二.目的 每次登录主系 ...
- wait和waitpid详解
wait的flag参数不是很明确,考虑多个进程同时结束的情况,信号时如何处理的,是否会出现覆盖情况 wait的函数原型是: #include<sys/types.h> #include & ...
- TigerLeapMC V1.3 for Windows(支持DLNA)
TigerLeapMC V1.3 2014-04-10: 1.更新tlplayer TigerLeapMC是基于tlplayer作为播放器的集成DLNA,(DMS,DMR,DMP)等,支持各种网络播放 ...
- Sequence Assignments FRM-41830: List of Value contains no entries.
SYMPTOMS ============================================================ GL > Setup > Financials ...
- Android开发UI之补间动画-Tween Animation
Tween Animation-补间动画 官网链接-http://developer.android.com/reference/android/view/animation/Animation.ht ...
- poj1141Brackets Sequence(dp+路径)
链接 dp好想 根据它定义的 记忆化下就行 路径再dfs一遍 刚开始以为要判空格 所以加了判空格的代码 后来知道不用 .. #include <iostream> #include< ...
- amaze UI的使用
1.放置在独立的位置 2.引入核心css与js <link href="{sh::PUB}amaze-ui/css/amazeui.min.css" rel="st ...