浅谈JavaScript中的forEach、for in和for of循环的基本用法和区别。

forEach

forEach是Array原型链上的函数。

Array.prototype.forEach()

语法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

currentValue：当前值
index：当前索引
array：正在操作的数组
thisArg：当执行回调函数 callback 时，用作 this 的值。

缺点

1. callback中不能使用break。
   
2. callback中总是返回 undefined 值。如果提前return且设置返回值，仅会提前完成当前操作元素的callback，返回值仍然是undefined。

for in

for-in是为遍历对象而设计的，不适用于遍历数组。for in循环遍历的往往是键名、索引，所以它更适合遍历对象。

语法

for(let key in arr) {
	//do something...
}

缺点

1. 遍历时使用的key是string字符串类型。
2. for in遍历数组时会遍历数组所有的可枚举属性，包括原型（hasOwnPropery可解决原型问题）。

示例

let arr = [2, 6, 1, 8, 3]
arr.property = '数组arr的属性property'
// 原型链上添加方法
Array.prototype.show = () => {
    console.log('Array显式原型对象上的方法show');
}
// for in循环
for(let i in arr) {
    console.log(typeof i,i,arr[i]);
}

for of

for of适用遍历数组、字符串、Set、Map、arguments、NodeList等拥有迭代器对象的集合，对于普通对象，需要自己写Symbol.iterator。for of遍历的结果往往是值，因此for of更适合遍历数组。

语法

for(const item of 可遍历对象){}

缺点

不能遍历普通对象，需要自己写另外的方法。
以下是解决方法：

const obj = {
    0: 'a',
    1: 'b',
    length: 2
}

// 法一
obj[Symbol.iterator] = Array.prototype[Symbol.iterator]

// 法二
obj[Symbol.iterator] = () => {
    let index = 0;
    return {
        next() {
            if (index < obj.length) {
                value = obj[index],
                    done = false
            } else {
                value = undefined,
                    done = true
            }
            index++;
            return {
                value,
                done
            }
        }
    }
}

for(const item of obj){
    console.log(item);
}

效率问题

长度缓存普通for > 普通for > forEach、for of、for in。