forEach for-in for-of的区别

for 可以使用break跳出循环 continue跳过本次循环

首先最基础的就是for循环了

for(var i=0;i<arr.length;i++){
  if(i==1){
    continue
  }
  console.log(arr[i]);
}

forEach

只能循环数组，不能使用break continue(会直接报错),使用return可以条跳过当前循环，继续后边的

let obj = {a: '1', b: '2', c: '3', d: '4'}
arr.forEach(function (val, idx, arr)
{
  if(idx==1){
    //break
  }
  console.log(val + ', index = ' + idx) // val是当前元素，index当前元素索引，arr数组
  console.log(arr)
})

for in数组或者对象

如下可见 for in 循环遍历的值都是数据结构的键值 可以使用break和continue

let arr = ['a', 'b', 'c', 'd']
for (let o in arr) {
    console.log(o)    
    //log: 0,1,2,3,4
}

for of

是es6新增加的 用来循环获取一对键值对中的值 可以使用break和continue

let arr = ['a', 'b', 'c', 'd']
for (let o of arr) {
  console.log(o)    
//log: a,b,cd
}

https://es6.ruanyifeng.com/#docs/iterator
一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。
for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串

对于普通的对象使用for of会报错

image.png

主要区别

mdn上解释的很清楚
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of
个人理解过来：
for in以任意顺序迭代对象的所有可枚举的属性，包括一个对象上原型上添加的属性等也将会被枚举出来
for of 遍历可迭代对象定义的要迭代的数据

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

for (let i in iterable) {
  console.log(i); // logs 0 1 2  foo arrCustom  objCustom 
}