JavaScript学习之路05_Iterator

来源:互联网 发布:知乎 高品位礼品 编辑:程序博客网 时间:2024/06/06 09:28

这里的知识点包括条件判断,循环、Map、Set和Iterator,由于条件判断和循环比较简单,就大概略过,主要讲解后面的集合。
同上,直接操作,以知识点为基础,先了解怎么用,然后在理解原理。
代码如下:

//定义变量var a = 2;//进行条件判断,输出falseif(a > 3) {    alert('true'); }else {    alert('false');}//定义对象,使用for..in循环var person = {     name:'cheng',      age:22for(var key in person) {    console.log(key);    }//定义数组var arr = [1,2,3];//使用for..in循环遍历for(var i in arr){     console.log(i);        console.log(arr[i]);        }//不太理解这里输出的原理,为什么前面会用VM10437:2VM10437:2 0VM10437:2 1VM10437:2 1VM10437:2 2VM10437:2 2VM10437:2 3//继续遍历,使用for..in遍历,他的键是string类型的for(var i in arr){     console.log(typeof i);     console.log(typeof arr[i]);}//结果如下VM10604:2 stringVM10604:2 numberVM10604:2 stringVM10604:2 numberVM10604:2 stringVM10604:2 number//遍历如下数组,并且之前打印hellovar arr = ['Bart', 'Lisa', 'Adam'];//输出结果,不能使用for..in循环进行遍历for(var i=0; i<arr.length; i++) {     console.log("hello "+ arr[i]); }VM11242:2 hello BartVM11242:2 hello LisaVM11242:2 hello Adam//定义Mapvar m = new Map();//使用set方法添加元素m.set('zhangcheng', 99);    Map {"zhangcheng" => 99}m.set('lizhen', 98);    Map {"zhangcheng" => 99, "lizhen" => 98}//判断有没有这个元素m.has('zhangcheng');truem.has('lisi');false//获取元素的值m.get('zhangcheng');99//删除Map中的元素m.delete('lizhen');true//如果没有元素,就返回undefinedm.get('lizhen');undefined//重新给已有的元素进行赋值,会将前面的值覆盖m.set('zhangcheng', 88);    Map {"zhangcheng" => 88}m.get('zhangcheng');    88//申明Set集合var s = new Set();//添加元素s.add("zhangcheng");    Set {"zhangcheng"}s.add("lizhen");    Set {"zhangcheng", "lizhen"}s.add('yangfenggang');    Set {"zhangcheng", "lizhen", "yangfenggang"}//Set集合的size属性获取Set集合的大小s.size;3//不是size方法s.size();//会报错VM12814:2 Uncaught TypeError: s.size is not a function(…)(anonymous function) @ VM12814:2InjectedScript._evaluateOn @ VM155:875InjectedScript._evaluateAndWrap @ VM155:808InjectedScript.evaluate @ VM155:664//定义Set集合,因为Set集合不能存储重复的元素,所以会将前面的进行覆盖,额,这里有点不严谨,没有进一步考证,是覆盖还是保留前面的,如果有朋友验证过,请留言,谢谢var s = new Set([1,2,3,4,4,4,4,4,45]);s;Set {1, 2, 3, 4, 45}//delete方法s.delete(3);true//for..of方法var a = [1,2,3]; for(var x of a){    console.log(x);}VM13347:2 1VM13347:2 2VM13347:2 3这里有个问题?为什么需要for..of方法呢?它和for..in方法有什么区别吗?看例子:for ... in循环由于历史遗留问题,它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象,它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后,for ... in循环将带来意想不到的意外效果:var a = ['A', 'B', 'C'];a.name = 'Hello';for (var x in a) {    alert(x); // '0', '1', '2', 'name'}for..of修复了这个问题:var a = ['A', 'B', 'C'];a.name = 'Hello';for (var x of a) {    alert(x); 'A', 'B', 'C'}//定义一个Map集合var m = new Map([[1,'a'],[2,'b'],[3,'c']]); //使用for..of进行遍历for(var x of m){     console.log(x[0]+" "+x[1]);}VM13629:2 1 aVM13629:2 2 bVM13629:2 3 c//iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。//遍历Arrayvar a = [1,2,3]; a.forEach(function(element, index, array){     // element: 指向当前元素的值        // index: 指向当前索引        // array: 指向Array对象本身    alert(element);     });//也可以省略其他的参数var a = [1,2,3]; a.forEach(function(element){    alert(element)    });//遍历Set集合var s = new Set([1,2,43]); s.forEach(function(element, s){     alert(element);     });//遍历Map集合var m = new Map([[1,'a'], [2,'b']]); m.forEach(function(value, key, map){     alert(value); });
1 0
原创粉丝点击