for in和for of和foreach

forEach

[1, 2, 3, 5, 10].forEach(element => {
    console.log(element)
});

foreach 方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回

for in

var obj = {
    a: 1,
    b: 2
}
var arr = ['嘿嘿','哈哈','啦啦']
var str = 'sdasf'
var words = new Set(['work','play','lang'])

// 遍历对象
for (const key in obj) {
    console.log(key)    // a,b
}
// 遍历数据
for (const key in arr) {
    console.log(key)    // 0,1,2
}
// 遍历字符串
for(const key in str) {
    console.log(key)    // 0,1,2,3,4
}
// 遍历数字
for(const key in 0) {
    console.log(key)    // 啥也没输出
}
// 遍历Set
for(const key in words) {
    console.log(key)    // 啥也没输出
}

由上我们可以看出，for in最适合遍历对象，并且只能输出可枚举属性(包括原型上的可枚举属性)。虽然它也可以遍历数组和字符串，但是它的key是数组下标，这个下标是String类型，不是Number类型。

for in陷阱：

var arr = ['a','b','c']
arr.name = '嘿嘿'
for(const key in arr) {
    console.log(key)    // 0,1,2,name
}
for (const key of arr) {
    console.log(key)    // a,b,c
}

 这个时候会发现for in的弊端，for of可以解决这个问题

for of

var obj = {
    a: 1,
    b: 2
}
var arr = ['嘿嘿','哈哈','啦啦']
var str = 'sdasf'
var words = new Set(['work','play','lang'])

// 遍历对象
for (const key of obj) {
    console.log(key)    // TypeError: obj is not iterable
}
// 遍历数据
for (const key of arr) {
    console.log(key)    // 嘿嘿,哈哈,啦啦
}
// 遍历字符串
for(const key of str) {
    console.log(key)    // s,d,a,s,f
}
// 遍历数字
for(const key of 0) {
    console.log(key)    // TypeError: 0 is not iterable
}
// 遍历Set
for(const key of words) {
    console.log(key)    // work,play,lang
}

1、避免for in陷阱
2、不同于forEach，可以使用break, continue 和 return
3、支持字符串的遍历
4、不能直接遍历对象
5、不仅支持数组的遍历，还支持类数组的遍历

补充：数组可以采用下标循环，但是Map和Set就没法使用下标。为了统一集合的类型，ES6标准引入了一个新iterable类型。Array、Set、Map都属于iterable类型。具有iterable类型的集合可以通过for of来遍历