JavaScript学习之路05_Iterator

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

//定义变量
var a = 2;
//进行条件判断，输出false
if(a > 3) {
    alert('true'); 
}else {
    alert('false');
}
//定义对象，使用for..in循环
var person = {
     name:'cheng', 
     age:22
for(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:2
VM10437:2 0
VM10437:2 1
VM10437:2 1
VM10437:2 2
VM10437:2 2
VM10437:2 3
//继续遍历，使用for..in遍历，他的键是string类型的
for(var i in arr){ 
    console.log(typeof i); 
    console.log(typeof arr[i]);
}
//结果如下
VM10604:2 string
VM10604:2 number
VM10604:2 string
VM10604:2 number
VM10604:2 string
VM10604:2 number
//遍历如下数组，并且之前打印hello
var arr = ['Bart', 'Lisa', 'Adam'];
//输出结果，不能使用for..in循环进行遍历
for(var i=0; i<arr.length; i++) { 
    console.log("hello "+ arr[i]); 
}
VM11242:2 hello Bart
VM11242:2 hello Lisa
VM11242:2 hello Adam
//定义Map
var m = new Map();
//使用set方法添加元素
m.set('zhangcheng', 99);
    Map {"zhangcheng" => 99}
m.set('lizhen', 98);
    Map {"zhangcheng" => 99, "lizhen" => 98}
//判断有没有这个元素
m.has('zhangcheng');
true
m.has('lisi');
false
//获取元素的值
m.get('zhangcheng');
99
//删除Map中的元素
m.delete('lizhen');
true
//如果没有元素，就返回undefined
m.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 1
VM13347:2 2
VM13347: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 a
VM13629:2 2 b
VM13629:2 3 c
//iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。
//遍历Array
var 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); 
});