在前端开发中，循环是一个非常常见的操作。它可以让我们对数组、对象等数据类型进行遍历和操作。但是，很多初学者在写循环时容易出现一些错误，导致代码效率低下或不符合预期。本文将介绍正确的循环写法，并提供示例代码和实用技巧。
for 循环
for 循环是最常用的循环语句之一，它的语法如下：
--- -------- ------ --------- -
-- -----
-其中：
- 初始化表达式：通常用来声明一个计数器变量并初始化。
- 条件表达式：每次循环前都会判断该条件是否成立，如果成立，则执行循环体；否则，退出循环。
- 循环后操作表达式：每次循环结束后执行，通常用于更新计数器变量的值。
示例代码：
----- --- - --- -- -- ---
--- ---- - - -- - - ----------- ---- -
--------------------
-上述代码中，我们使用 for 循环遍历了一个数组，并打印了其中的每个元素。
forEach 循环
forEach 循环是 ES5 中新增的数组遍历方法，它的语法如下：
-------------------------- ------ ------ -
-- -----
---其中：
- item：代表当前遍历到的元素。
- index：代表当前元素的索引。
- array：代表正在遍历的数组对象。
示例代码：
----- --- - --- -- -- ---
-------------------------- ------ ------ -
------------------
---上述代码中，我们使用 forEach 循环遍历了一个数组，并打印了其中的每个元素。
需要注意的是，forEach 循环不支持 break 和 continue 语句。如果需要在循环过程中进行跳出或继续操作，可以考虑使用 for 循环或其他语句。
for...in 循环
for...in 循环是用来遍历对象属性的语句。它的语法如下：
--- --------- -- ------- -
-- -----
-其中：
- variable：代表正在遍历的属性名。
- object：代表要遍历的对象。
示例代码：
----- --- - ------ ----- ---- ----
--- ---- --- -- ---- -
--------------- - -- - - ----------
-上述代码中，我们使用 for...in 循环遍历了一个对象，并打印了其中的每个属性名和属性值。
需要注意的是，for...in 循环会遍历对象自身及其原型链上所有可枚举的属性。因此，在遍历对象属性时，需要通过 hasOwnProperty 方法判断是否为对象自身的属性。
for...of 循环
for...of 循环是 ES6 中新增的遍历器（Iterator）遍历方法，它可以遍历具有 Iterable 接口的数据结构。它的语法如下：
--- --------- -- ------- -
-- -----
-其中：
- variable：代表正在遍历到的值。
- object：代表要遍历的数据结构，例如数组、字符串等。
示例代码：
----- --- - --- -- -- ---
--- ---- ---- -- ---- -
------------------
-上述代码中，我们使用 for...of 循环遍历了一个数组，并打印了其中的每个元素。
需要注意的是，for...of 循环只能用于遍历具有 Iterable 接口的数据
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10771