太长不看版本

1. 遍历对象属性，用for...in取key(和 Object.keys() 效果一样)
2. 需要用break. continue，用for， for...of
3. 需要自己设置遍历的起点，用for
4. 需要跳过数组中的未定义元素，用forEach
5. 摸不清这个变量具体是Array，String，Set还是Map，用for...of
6. 对性能要求极高，数组极大，用for

break与continue

for...of是基于ierator的，iterator包含一个return方法，可以提前终止遍历, forEach只是在内部用for循环逐一调用回调函数, 不支持提前退出。

let arr = ["a", "b", "c"];

for(let item of arr){
  console.log(item);
  if(item === "b")break;
}
// a b

arr.foreach(item => {
  console.log(item);
  if(item === "b")break; // Uncaught SyntaxError: Illegal break statement
})

for循环可以设置起始起点

for...of和forEach不支持，无脑从头到尾走完

for...in 和 for...of

for...in 语句以任意顺序迭代对象的可枚举属性。
for...of 语句遍历可迭代对象定义要迭代的数据。

let arr = [1,2,3];
arr.foo = "hello";

for(let item in arr){
  console.log(item);
}
// 0 1 2 'foo'

let arr = [1,2,3];
for(let item of arr){
  console.log(item);
}
// 1 2 3

for...in是ES6之前的，主要适用于遍历对象的key, 但其实我用到的更多的方法是Object.keys(obj);
for...of是ES6新加的，基于iterator, 其内部会获取数据上部署的[Symbol.iterator], 调用其上面的next方法来实现遍历。一切部署了iterable接口的数据都可以用for...of来遍历。原生部署的数据类型有：Array，String，Set，Map（注意Object没有原生部署Iterator, ）

为什么对象不部署iterable 是因为对象的哪个属性先遍历，哪个属性后遍历是不确定的，需要开发者手动指定。遍历器是一种线性处理，对于任何非线性的数据结构，部署遍历器接口，就等于部署一种线性转换。不过，严格地说，对象部署遍历器接口并不是很必要，因为这时对象实际上被当作 Map 结构使用，ES5 没有 Map 结构，而 ES6 原生提供了。

let arr = ["a", "b", "c"];
const iterator = arr[Symbol.iterator]();
iterator.next(); //  {value: "a", done: false}
iterator.next(); // {value: "b", done: false}
iterator.next(); // {value: "b", done: true}
iterator.next(); // {value: undefined, done: true}

如果自己实现一个，也很简单：

interface Iterable{
  [Symbol.iterator]: Iterator;
}

Interface Iterator{
  next(value?: any) : IterationResult,
}

Interafce IterationResult{
  done: boolean;
  value: any
}

// 自己实现一个Iterator 
Array.prototype[Symbol.iterator] = function(){
  let index = 1;
  return {
     next: () => {
           return {
              value: this[index++],
              done: index >= this.length
           } 
     }
  }
}
const Arr = [1,2,3];
newArr[Symbol.iterator]().next(); // { value: 2, done: false}

循环体内改变数组元素

这样会直接改掉原数组，不管哪种循环方式都一样，非常不建议在循环体内改变数组本身！

let arr = ["a", "b", "c"];

for(let item of arr){
  console.log(item);
  arr[1] = "PPP";
}
console.log(arr);

// a PPP c
// [a PPP c]

arr.forEach(item => {
  console.log(item);
  arr[1] = "AAA"
})
console.log(arr);
// a AAA c
// [a AAA c]

for(let i=0; i<arr.length; i++){
  console.log(arr[i]);
  arr[1] = "BBB"
}
console.log(arr);
// a BBB c
// [a BBB c]

稀疏数组

forEach会跳过未初始化的元素, 而for, for...of不会(除非自己控制)

// 稀疏矩阵
const sparseArr = [1, , 3];
sparseArr.forEach((item, index) => {
  console.log(item, index);
})
// 1 0
// 3 2

forEach支持绑定回调函数的this

我用的很少，也没有遇到哪里需要用

参考

https://www.bookstack.cn/read/es6-3rd/spilt.7.docs-iterator.md
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#using_foreach_on_sparse_arrays