遍历Array可以采用下标循环，遍历Map和Set就无法使用下标,因为Map与Set都没有索引。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

1.for of遍历

例如： 把上节的Map与Set使用for ...of遍历。

<script>
    let arr = [1,2,3,4,5];
    let map = new Map([['北京', "010"], ['上海', "021"], ['广州', "020"],['东京', "000"]]);
    let set = new Set(['orange','banana','apple']);

    for(let i of arr){
        console.log(i);
    }

    for(let m of map){
        console.log(m);
        console.log(m[0]+"="+m[1]);
    }

    for(let s of set){
        console.log(s);
    }
</script>

运行结果：

2.for of与for in区别

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果。

例如：

<script>
    let arr = [1,2,3,4,5];
    arr.title='数组标题';
    for(let e in arr){
        console.log(e);
    }

    for(let e of arr){
        console.log(e);
    }
</script>

运行结果：

我们发现 for in 遍历出来的并不是元素值，而是属性。

for in 可以遍历对象的属性和属性值，而for of不可以，看下面的例子：

let person = {
     name: '张三',
     age: 20,
     gender: '男',
     address: '西安市雁塔区鱼化寨',
     eat: function () {
        console.log(this.name + "正在吃饭....")
    }
}


console.log("-------------使用for in 遍历--------------------");
for(let attr in person){
   console.log(attr);
   console.log(person[attr])
}

console.log("-------------使用for of 遍历--------------------");
for(let value of person){
   console.log(value);
}

运行结果：

--------------使用for in-------------------
name
张三
age
20
gender
男
address
西安市雁塔区鱼化寨
eat
ƒ () {
            console.log(this.name + "正在吃饭....")
        }
--------------使用for of-------------------
Uncaught TypeError: person is not iterable