关于前端循环的几种方式

循环数组或类数组对象

使用 for 循环是最基础的方式，适用于数组或类数组对象。通过索引访问元素，可以灵活控制循环的起始和结束位置。

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) { // arr.length表示数组的长度

  console.log(arr[i],i);  // i表示数字 arr[i]表示当前标识中的值 如arr[0]=1
}

打印结果如下：

前面为展示打印值，后面为打印i的值。数组中的起始一般是从0，若是i=1，则是从数组中第二位开始循环。i一般用于表示循环的次数，从哪里开始循环。

遍历对象属性

for...in 循环用于遍历对象的可枚举属性，包括原型链上的属性。通常需要配合 hasOwnProperty 检查属性是否属于对象自身。

const obj = { a: 1, b: 2 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // key表示a/b
    console.log(key, obj[key]);
  }
}

执行结果如下：

遍历数组元素

for...of 循环直接遍历可迭代对象（如数组、字符串、Map、Set）的值，无需处理索引。语法简洁，适合需要直接操作元素的场景。

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

打印结果如下：

数组高阶函数：map

Array.prototype.map 对数组每个元素执行回调函数，返回新数组。适合需要基于原数组生成新数组的场景，且不改变原数组。

const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr,arr); // [2, 4, 6]  [1,2,3]

打印结果如下：

数组高阶函数：forEach

Array.prototype.forEach 遍历数组每个元素并执行回调函数，无返回值。适合仅需遍历执行操作的场景，不能中断循环。

const arr = [1, 2, 3];
arr.forEach(item => {
  console.log(item);
});

打印结果如下：

数组高阶函数：filter

Array.prototype.filter 返回满足条件的元素组成的新数组。适合需要筛选特定元素的场景。不会改变原数组的值。

const arr = [1, 2, 3];
const filtered = arr.filter(item => item > 1);
console.log(filtered,arr); // [2, 3]  [1,2,3]

打印结果如下：

数组高阶函数：reduce

Array.prototype.reduce 通过累加器处理数组元素，返回单个值。适合需要汇总或计算的场景，如求和、扁平化数组等。

const arr = [1, 2, 3];
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 6

打印结果如下图：

While 循环

while 循环在条件为真时重复执行代码块。适合不确定循环次数的场景，需注意避免无限循环。

let i = 0;
while (i < 3) {
  console.log(i);
  i++; // i已经在这里进行了累加
  console.log('累加后的i=',i)  // 这里打印就是累加后的i
}

执行结果如下：

注：若是区分不清楚，可以在打印时加文字进行区分。

Do...While 循环

do...while 循环至少执行一次代码块，之后检查条件。适合需要至少执行一次的场景。

do {  
  // 循环体代码
} while (条件表达式); // 条件：当此条件为真时，循环体会继续执行


/*以下为条件为真时的处理结果*/
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);



/*以下为条件不为真时的处理结果*/
let i = 0;
do {
  console.log(i);
  i++;
} while (i >3);

当条件不满足时，进入循环之后的打印结果：

初始值进入循环后，即使i累加后，条件依旧不满足，这时就会直接跳出循环进行。

当条件满足时进入循环后的结果：