发表于: 2017-04-17 21:33:41
1 1233
今天完成的事情:上午完成了游戏结果页js代码的编写,反复调试了文字输出部分中重复取值和对布局有变化影响的地方。下午整理小课堂的内容,补充相关资料。晚上开始任务5的学习和准备,下载了接口和设计图,编写了html、css文件。
明天计划的事情:开始任务5的学习,完成静态登陆页面。复习nginx,学习Ajax。
遇到的问题:
第一个,开始编写的复制天数列表的js代码有问题,在运算时多加了1,导致第一天变成了第二天。后来修改过来了。又因为一时没有注意,在clone时放在了body中,导致复制出来的列表信息比前一个列表有很大的空隙,开始以为是css中代码有问题,后来查看以前css任务中的效果,发现css没有问题,接着就去找js的问题,发现在html的结构中天数列表是body的孙子级的div,不是直属的子级div,然后寻找到了天数列表的父级,重新定义了clone的位置。再生成的数据就正常了。
第二个,在生成了天数列表里,修改天数很容易,怎么修改每天不同的死亡玩家的信息,费了很大的功夫。开始打算在每天中在检索出两条文字来,通过死亡玩家数组的遍历,对其进行修改。但是问题来了,因为是抽取的每天的文字,导致最后生成的文字都是一样的。这样肯定错了,后来就想,怎么按照死亡玩家的数组一条条把他们加到每天的信息中呢?试着试着就想到为什么不直接获得每条文字,然后直接修改呢?为什么要从获取每天再获取他们呢?随后简化了获取的路径,直接对所有天中的p元素进行获取,它就是一个数组,然后按照死亡玩家的数组进行遍历赋值,然后就准确改变了每天死亡的信息。
收获:在使用js中始终感觉头脑不够灵活,有时很简单的一个东西,想着想着就变复杂了。不过经过不断调整,最后还是做出了一些效果。当然这也反映出对知识掌握的不足,对各种方法的理解不够上。希望以后养成在做中学,在学中总结的好习惯,快速积累js部分的思维。
整理一下小课堂的知识点:
对一个数组 filter、some、map、foreach的操作分别有什么作用?
1.背景介绍
前两天群里发了一份面试的题,看到有这个题目,这几种方法都是数组中的迭代方法,今天我们来学习讨论一下!
2.知识剖析
2.1迭代方法
在ECMAScript5中为数组定义了5个迭代方法,分别是every()、filter()、forEach()、map()和some()。以上5中方法中都接收两个参数:在每一个项上运行的函数和一个可选的参数——运行该函数的作用域对象。传入的函数会接收三个参数:数组项的值,该项在数组中的位置(可选)和数组对象本身(可选)。
例如,它这样表达:
var a = [0,1,3,4,5,6,2,4,5];
var every = a.every(function(item, index, array){
return (item > 2);
});
console.log(every); //false
2.2 every()方法的使用
every():对数组中的每一项运行给定的函数,如果该函数对数组中的每一项都返回true,则运行结果返回true。every() 不会对空数组进行检测,也不会改变原始数组。
var a = [0,1,3,4,5,6,2,4,5];
var every = a.every(function(item, 0, a){
return (item > 2);
});
console.log(every); //false
2.3 some()方法的使用
some():对数组中的每一项运行给定的函数,如果该函数对数组中的任一项返回true,则运行结果返回true。同样的,some() 不会对空数组进行检测,也不会改变原始数组。
var b = [0,1,2,3,4,5,6];
var some = b.some(function(item, 0, b){
return (item > 2);
});
console.log(some); //true
2.4 forEach()方法的使用
forEach():对数组中的每一项运行给定的函数,这个函数没有返回值。forEach() 的用法和for循环迭代数组一样。该方法对于空数组是不会执行回调函数的。
1. var b = [0,1,2,3,4,5,6];
b.forEach(function(item){
console.log(item);
});
2. function square(num){
console.log(num * num) ;
}
var nums = [1,2,3,4,5];
console.log(nums.forEach(square));
3. var sum = 0;
nums.forEach(function(value){sum += value;});
4. nums.forEach(function(v,i,a){a[i] = v + 1;})
2.5 map()方法的使用
map():对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组。不会对空数组进行检测,也不会改变原始数组
var nums = [1,2,3,4,5];
var nums2 = nums.map(function square(item){
return item * 2;
});
console.log(nums2);
2.6 fiter()方法的使用
fiter():对数组中的每一项运行给定的函数,返回该函数会返回true的项组成的数组。不会对空数组进行检测,也不会改变原始数组。
var nums = [1,2,3,4,5,7,5,3];
var nums2 = nums.filter(function(item){
return item > 2;
});
console.log(nums2);
3.常见问题
问题: 如何判断两个数组中相同的项,然后将相同的部分或者不同的部分生成新的数组?
4.解决方案
这里要引入一个简单的案例向大家演示一下。
var num1 = [1,2,3,4,5,7];
var num2 = [2,3,5];
var nums = num1.filter(function(val){
return num2.indexOf(val) >= 0;
});
console.log(nums);
5.编码实战
见以上编写的代码
6.扩展思考
问题: forEach()方法和$.each()的区别?
[].forEach(function(value, index, array) {
// ...
});
//等同于
$.each([], function(index, value, array) {
// ...
});
注意参数的顺序!
7.参考文献
参考一:JavaScript高级程序设计
参考二:JavaScript权威指南
参考三:JS中的forEach、$.each、map方法推荐
参考四:菜鸟教程中JavaScript Array 对象
8.更多讨论
讨论点:JavaScript Array对象中还有哪些方法值得我们在现有任务中注意?
评论