正确的写循环的方法

在前端开发中，循环是一个非常常见的操作。它可以让我们对数组、对象等数据类型进行遍历和操作。但是，很多初学者在写循环时容易出现一些错误，导致代码效率低下或不符合预期。本文将介绍正确的循环写法，并提供示例代码和实用技巧。

for 循环

for 循环是最常用的循环语句之一，它的语法如下：

for (初始化表达式; 条件表达式; 循环后操作表达式) {
    // 循环体代码
}

其中：

• 初始化表达式：通常用来声明一个计数器变量并初始化。
• 条件表达式：每次循环前都会判断该条件是否成立，如果成立，则执行循环体；否则，退出循环。
• 循环后操作表达式：每次循环结束后执行，通常用于更新计数器变量的值。

示例代码：

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

上述代码中，我们使用 for 循环遍历了一个数组，并打印了其中的每个元素。

forEach 循环

forEach 循环是 ES5 中新增的数组遍历方法，它的语法如下：

arr.forEach(function(item, index, array) {
    // 循环体代码
});

其中：

• item：代表当前遍历到的元素。
• index：代表当前元素的索引。
• array：代表正在遍历的数组对象。

示例代码：

const arr = [1, 2, 3, 4];
arr.forEach(function(item, index, array) {
    console.log(item);
});

上述代码中，我们使用 forEach 循环遍历了一个数组，并打印了其中的每个元素。

需要注意的是，forEach 循环不支持 break 和 continue 语句。如果需要在循环过程中进行跳出或继续操作，可以考虑使用 for 循环或其他语句。

for...in 循环

for...in 循环是用来遍历对象属性的语句。它的语法如下：

for (variable in object) {
    // 循环体代码
}

其中：

• variable：代表正在遍历的属性名。
• object：代表要遍历的对象。

示例代码：

const obj = {name: '张三', age: 18};
for (let key in obj) {
    console.log(key + ': ' + obj[key]);
}

上述代码中，我们使用 for...in 循环遍历了一个对象，并打印了其中的每个属性名和属性值。

需要注意的是，for...in 循环会遍历对象自身及其原型链上所有可枚举的属性。因此，在遍历对象属性时，需要通过 hasOwnProperty 方法判断是否为对象自身的属性。

for...of 循环

for...of 循环是 ES6 中新增的遍历器（Iterator）遍历方法，它可以遍历具有 Iterable 接口的数据结构。它的语法如下：

for (variable of object) {
    // 循环体代码
}

其中：

• variable：代表正在遍历到的值。
• object：代表要遍历的数据结构，例如数组、字符串等。

示例代码：

const arr = [1, 2, 3, 4];
for (let item of arr) {
    console.log(item);
}

上述代码中，我们使用 for...of 循环遍历了一个数组，并打印了其中的每个元素。

需要注意的是，for...of 循环只能用于遍历具有 Iterable 接口的数据

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10771