[零基础学HTML5]Java script 中的函数式编程(练习2~5)
围棋新人吧
全部回复
仅看楼主
level 13
JohnYe3333 楼主
做完练习1后,思考一个问题:我们需要指定输出名字的次序吗?如果不需要的话,为什么我们要这么做呢?
2016年05月09日 00点05分 1
level 13
JohnYe3333 楼主
练习2: 使用forEach打印数组中的所有名字
使用forEach函数重做前一题。
教程提供了标准答案:
function(console) {
var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"];
names.forEach(function(name) {
console.log(name);
});
}
注意:forEach让我们指定针对数组中的每一个元素我们想让它们做什么,但是隐藏了数组是如何遍历的的细节信息。
2016年05月09日 00点05分 2
level 13
JohnYe3333 楼主
数组投影
针对某一数值,施加某种方法(函数),从而产生一个新的数值的过程叫投影。为了把一个数组投影到另一个数组,我们需要针对数组中的每一个元素进行投影,并把结果收集到新的数组中去。
2016年05月09日 00点05分 3
level 13
JohnYe3333 楼主
练习3: 使用forEach把一个视频数组投影成一个由{id,title}对组成的数组。
在videoAndTitlePairs数组中为每一个视频增加一个投影后的{id, title}对。
function() {
var newReleases = [
{
"id": 70111470,
"title": "Die Hard",
"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [4.0],
"bookmark": []
},
{
"id": 654356453,
"title": "Bad Boys",
"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [5.0],
"bookmark": [{ id:432534, time:65876586 }]
},
{
"id": 65432445,
"title": "The Chamber",
"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [4.0],
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [5.0],
"bookmark": [{ id:432534, time:65876586 }]
}
],
videoAndTitlePairs = [];
// ------------ 代码写在这里! -----------------------------------
// 使用forEach方法来积聚每个视频项的{id, title}对。
// 使用数组的push方法把结果放到videoAndTitlePairs数组中去。
// 例如: videoAndTitlePairs.push(newItem);
// ------------ 代码写在这里! -----------------------------------
return videoAndTitlePairs;
}
2016年05月09日 00点05分 4
level 13
JohnYe3333 楼主

所有的数组投影函数共享两个通用操作:
1. 遍历源数组
2. 把每个项目的投影值加到一个新的数组中去
(既然这样,)为什么不把这样操作执行给抽象出去呢?
2016年05月09日 00点05分 5
level 13
JohnYe3333 楼主

练习4:实现map()
为了让投影容易点,我们给数组类型加一个map()函数。 Map接受投影函数,把投影函数应用到源数组的每一项,并返回投影后的数组。
Array.prototype.map = function(projectionFunction) {
var results = [];
this.forEach(function(itemInArray) {
// ------------ 代码写在这里! ----------------------------
// 把投影函数应用到数组中的每一项上去,
// 并把结果加到结果数组中去。
// 注意:你可以使用push方法为数组增加项目。
// ------------代码写在这里! ----------------------------
});
return results;
};
// JSON.stringify([1,2,3].map(function(x) { return x + 1; })) === '[2,3,4]'
2016年05月09日 00点05分 6
level 13
JohnYe3333 楼主
练习5: 使用map函数把一个视频数组投影到一个由{id,title}对组成的数组中去
让我们来重新练习下从newReleases数组的视频元素中收集{id, title}对,不过,这一次我们将使用我们的map函数。
function() {
var newReleases = [
{
"id": 70111470,
"title": "Die Hard",
"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [4.0],
"bookmark": []
},
{
"id": 654356453,
"title": "Bad Boys",
"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [5.0],
"bookmark": [{ id:432534, time:65876586 }]
},
{
"id": 65432445,
"title": "The Chamber",
"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [4.0],
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture. jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": [5.0],
"bookmark": [{ id:432534, time:65876586 }]
}
];
return newReleases.map //把map函数写完整。
}
注意:map 允许我们指定在某个数组上我们想施加何种投影,却隐藏了投影如何操作的细节。
2016年05月09日 00点05分 7
level 13
JohnYe3333 楼主
习题参考答案(2~5)
2016年05月09日 00点05分 8
level 13
JohnYe3333 楼主
练习2:
标准答案:
function(console) {
var names = ["Ben", "Jafar", "Matt", "Priya", "Brian"];
names.forEach(function(name) {
console.log(name);
});
}
这一次,俺的答案与标准答案一模一样,很happy。
2016年05月09日 00点05分 9
level 13
JohnYe3333 楼主
练习3:
标准答案:
newReleases.forEach(function(video) {
videoAndTitlePairs.push({id:video.id, title: video.title});
});
俺写成这样:
newReleases.forEach(function(video){
var newItem = [];
newItem.push({"id":video.id , "title":video.title});
videoAndTitlePairs.push(newItem);
});
没有标准答案那么简洁,好看。
2016年05月09日 00点05分 10
level 13
JohnYe3333 楼主
练习4:
标准答案:
results.push(projectionFunction(itemInArray));
俺写成这样了:
results.push(itemInArray+1);
居然也过了,嘿嘿。
错误的原因在于根本没理解projectionFunction是什么。
2016年05月09日 00点05分 11
level 13
JohnYe3333 楼主
练习5:
标准答案:
return newReleases.map(function(video) { return {id: video.id, title: video.title}; });
这次俺折腾许久,根本就没过,俺最后放弃的时候,代码如下:
return newReleases.map(function(item) {
var newItem = [];
newItem.push({"id":item.id , "title":item.title});
return newItem;
});
咳咳,看起来有点接近标准答案了,这还是联想到了练习4中投影函数的结果。这个真心难做啊。
2016年05月09日 00点05分 12
level 13
JohnYe3333 楼主
看来自学还是跟着教程学一遍,再做练习的好~~~~
2016年05月09日 00点05分 13
level 13
JohnYe3333 楼主
P.S. 另外一个悲催的消息是:在这里发现了别人的翻译:http://www.heyria.com/index.php/2014/02/javascript-functional/ 从练习1翻译到练习24. 俺琢磨了下,还是继续译吧,好象有39道练习来着,对方可能没有译全。 :(
2016年05月09日 00点05分 14
level 13
JohnYe3333 楼主
总链接:
[技术水]零基础学HTML5,目标:做个网页版的围棋App
( https://tieba.baidu.com/p/4446488002 )
2016年05月09日 00点05分 15
1