详解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后面的语句而是执行下一次循环，并不会终止包含他的循环
2：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 循环一致。参考上文。
3：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，今天就分析到这里，通过梳理让自己更清晰这一块的内容，也希望能帮助到大家。
