循环是前端开发中常用的方法之一，它能够帮助我们快速地遍历数组、对象及其他数据结构，从而进行操作。在 JavaScript 中，循环有多种实现方法，ES12 更是为此增添了新的特性。本文介绍了 ES12 中的三个循环特性：for…in 循环、for…of 循环和 Array.prototype.forEach() 方法，并结合实例代码进行说明。
for…in 循环
for…in 循环是用于遍历对象的一种循环方法，它能够遍历对象中的属性名称。其语法结构如下：
for (variable in object) {
statement
}其中，variable 是接收对象属性名的变量，object 是要遍历的对象，statement 为循环体语句。需要注意的是，for…in 循环不保证对象属性的遍历顺序，并且会遍历对象继承的属性。
既然 for…in 循环是用来遍历对象的，那么就让我们来看一个实际的例子：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ------- -------- -- --- ---- ---- -- ------- - --------------------- ------------------ -
执行以上代码，输出结果如下所示：
name: Alice age: 25 gender: female
for…of 循环
for…of 循环是 ES6 中新增的循环语句，用于遍历可迭代对象（Iterable）。在 JavaScript 中，数组、字符串、Map、Set、TypedArray 等都是可迭代对象。其语法结构如下：
for (variable of object) {
statement
}其中，variable 是接收每个元素的变量，object 是要遍历的可迭代对象，statement 为循环体语句。需要注意的是，for…of 循环只能遍历 iterable 对象，同时它也不支持遍历对象。
接下来，我们来看一段 for…of 循环的示例代码：
const arr = [1, 2, 3];
for (let item of arr) {
console.log(item);
}执行以上代码，输出结果如下所示：
1 2 3
Array.prototype.forEach()
Array.prototype.forEach() 是 ES5 中新增的数组遍历方法，用于遍历数组中的每个元素。其语法结构如下：
array.forEach(function(currentValue, index, arr), thisValue)
其中，currentValue 是接收当前元素值的参数，index 是接收当前元素下标的参数，arr 是当前数组参数，thisValue 是可选参数，this 表示程序运行时，自动绑定到当前的执行上下文。需要注意的是，Array.prototype.forEach() 循环并不会改变原数组，它会对数组中的每个元素都执行一遍传入的函数。
让我们来看一个数组的遍历示例吧：
const arr = [1, 2, 3];
arr.forEach(function(item, index, arr) {
console.log(item, index, arr);
});执行以上代码，输出结果如下所示：
1 0 [1, 2, 3] 2 1 [1, 2, 3] 3 2 [1, 2, 3]
总结
三种循环方法各有优点，开发者需根据需要选择最适合的循环方法。其中 for…in 循环适用于遍历对象的属性，for…of 循环适用于遍历可迭代对象，而 Array.prototype.forEach() 则适用于对数组进行遍历。
新增的 ES12 循环特性使我们能够更加便捷地处理数据，也提高了可读性和可维护性。开发者利用循环特性可以提高代码的效率和质量，同时也可以为大家提供更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6647c917d3423812e4653a22