当前位置：首页 > JavaScript

js循环实现

2026-03-14 07:32:36JavaScript

循环基础语法

JavaScript 提供了多种循环结构来处理重复任务，以下是常见的循环类型：

for 循环：

for (let i = 0; i < 5; i++) {
  console.log(i); // 输出0到4
}

while 循环：

let i = 0;
while (i < 5) {
  console.log(i); // 输出0到4
  i++;
}

do...while 循环：

let i = 0;
do {
  console.log(i); // 至少执行一次
  i++;
} while (i < 5);

数组遍历方法

forEach 方法：

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

for...of 循环：

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

对象遍历方法

for...in 循环：

js循环实现

const obj = {a: 1, b: 2};
for (const key in obj) {
  console.log(key, obj[key]); // 输出a 1和b 2
}

Object.keys() 配合 forEach：

const obj = {a: 1, b: 2};
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]); // 输出a 1和b 2
});

循环控制语句

break 语句：

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i); // 输出0,1,2
}

continue 语句：

for (let i = 0; i < 5; i++) {
  if (i === 3) continue;
  console.log(i); // 输出0,1,2,4
}

高阶函数式循环

map 方法：

js循环实现

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2); // 返回[2,4,6]

filter 方法：

const arr = [1, 2, 3, 4];
const evens = arr.filter(x => x % 2 === 0); // 返回[2,4]

性能优化技巧

缓存数组长度：

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

减少DOM操作：

const elements = document.querySelectorAll('.item');
const results = [];
for (let i = 0; i < elements.length; i++) {
  results.push(elements[i].textContent);
}

异步循环处理

for...await...of：

async function process(array) {
  for await (const item of array) {
    console.log(item);
  }
}

Promise.all 配合 map：

const urls = ['url1', 'url2'];
const results = await Promise.all(urls.map(async url => {
  const response = await fetch(url);
  return response.json();
}));

标签: js