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