详解for，for-in，forEach,for-of几种循环

今天详细梳理下几种 for 循环，每种都有自己的特点和使用场景。下面我们开始梳理
说明：所有🌰均来自 MDN 官网

1： for 循环

for 循环应该是我们使用最频繁的一种循环结构。
语法结构如下：
MDN

for ([initialization]; [condition]; [final-expression])
   statement

举一个🌰

var arr = [1,2,3,4,5,6];
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

for 语句头部圆括号中的所有三个表达式都是可选的。
我们分别列举3个🌰

//初始化块中的表达式没有被指定
var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}

// 像初始化块一样，条件块也是可选的。如果省略此表达式，则必须确保在循环体内跳出，以防创建死循环。
for (var i = 0;; i++) {
   console.log(i);
   if (i > 3) break;
   // more statements
}

你当然可以忽略所有的表达式。同样的，确保使用了 break >语句来跳出循环并且还要修改（增加）一个变量，使得 break 语句的条件在某个时候是真的。

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

敲重点：
针对循环，我们需要对以下3个语句的作用好好辨析一下

return
return是表示从被调函数返回到主调函数继续执行，返回时可附带一个返回值，由return后面的参数指定。return后函数就结束了，后面的语句不再执行
break
此语句导致程序终止包含它的循环，开始执行整个循环后面的语句。例如：如果 break 包含嵌套循环里，它只跳出最里面的循环。
continue
循环执行到此语句，不再执行continue后面的语句而是执行下一次循环，并不会终止包含他的循环

for in 循环

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

for (variable in object)
  statement

variable
在每次迭代时，variable会被赋值为不同的属性名。
object
非Symbol类型的可枚举属性被迭代的对象。

使用场景：
它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in。
for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of

看🌰来学习：

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

由于 for in 会遍历可扩展属性的，即对象原型的属性或方法也会遍历，所以我们可以执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}
// "obj.color = red"

敲重点：
针对 for in 循环： break，continue， return 的表现跟 for 循环一致。参考上文。

forEach

forEach 是数组的一个方法。大家经常用，比较简单：

 var arr = [1,2,3];
 arr.forEach(function (value, index) {  
      console.log(value)
  });

敲重点： forEach里面不能使用 break; 和 continue;否则会报错。

但是可以使用 return， return 的效果是跳出本次循环的函数回调。并不会跳出整个循环，我想这一块很多人都没有注意到。说起来比较费解，我们举一个🌰来看

var arr = [1,2,3];
 arr.forEach(function (value,index) {  
     if (value ===2) { 
        return 
     }
      console.log(value)
  })

// 输出： 
// 1
// 3

根据输出，再结合上面的描述，我想应该可以明白了。

4： for-of 循环

for...of语句在可迭代对象（ Array，Map，Set，String，TypedArray，arguments 对象等等
）上创建一个迭代循环调用自定义迭代钩子，并为每个不同属性的值执行语句

我们来一个比较直观的🌰

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

语法：

for (variable of iterable) {
//statements
}

variable
在每次迭代中，将不同属性的值分配给变量。
iterable
被迭代枚举其属性的对象。

1：迭代Array

let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

2: 迭代String

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

3: 迭代 TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

4: 迭代Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

5 ：迭代 Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

6: 迭代 arguments 对象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

通过以上简单列子，我们已经覆盖了我们常用的场景，for of 可以遍历所有可迭代对象。更深入的学习可以参考MDN

敲重点：：
对于for...of的循环，break，continue， return 的表现跟 for 循环一致

OK，今天就分析到这里，通过梳理让自己更清晰这一块的内容，也希望能帮助到大家。