for in、for of、forEach 对比

1 forEach

forEach专门用来循环数组，可以直接取到元素，同时也可以取到index值,不可以遍历对象
缺点：不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，
方法不能使用break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数

优点：便利的时候更加简洁，效率和for循环相同，不用关心集合下标的问题，减少了出错的效率_

定义：用于调用数组的每个元素，并将元素传递给回调函数_

2 for in

定义：用于循环遍历数组或对象属性，fot in循环里面的index是string类型的， 代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。一般循环遍历的都是对象的属性，遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性，key会变成字符串类型
缺点：某些情况下，会出现随机顺序的遍历，因为里面的值是string类型，所以 增加了转换过程，因此开销较大
优点：可以遍历数组的键名，遍历对象简洁方便

 let arr = [1,2,3,4];
 arr.b='100';
 for(let key in arr){
        console.log(key);//会把b也输出来
    }

3 for of

for of是ES6新引入的特性。修复了ES5中for in的不足

允许遍历 Arrays（数组）、Strings（字符串）、Maps（映射）、Sets（集合）等可迭代的数据结构

for of 支持return, 只能遍历数组不能遍历对象（遍历对象需要通过和Object.keys()搭配使用）

一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口可以使用 for of循环。
哪些数据结构部署了 Symbol.iteratoer属性了呢?

• 数组 Array
• Map
• Set
• String
• arguments对象
• Nodelist对象, 就是获取的dom列表集合

假如一个普通的对象，如果想实现可迭代可用以下方法
方法一：

let a = {
    q: 1,
    d: 'ddd'
}
a[Symbol.iterator] = function () {
    let index = 0
    const keys = Object.keys(this)
    return {
        next: () => {
            return {
                value: this[keys[index]],
                done: index++ == keys.length 
            }
        }
    }
}

方法二：

a[Symbol.iterator] = function * () {
    let index = 0
    let keys = Object.keys(this)
    while(index !== keys.length) {
        yield this[keys[index++]]
    }
}