js实现遍历

遍历数组

使用for循环遍历数组是最基础的方法，可以精确控制索引和遍历顺序。

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

forEach方法提供更简洁的语法，适合不需要中断遍历的场景。

arr.forEach(item => {
  console.log(item);
});

遍历对象

for...in循环可以遍历对象的所有可枚举属性，包括继承的属性。

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

Object.keys结合forEach可以只遍历对象自身的可枚举属性。

Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

遍历Map和Set

Map结构可以使用forEach方法或for...of循环。

const map = new Map([['a', 1], ['b', 2]]);
map.forEach((value, key) => {
  console.log(key, value);
});

Set结构的遍历方式与Map类似。

const set = new Set([1, 2, 3]);
set.forEach(value => {
  console.log(value);
});

遍历类数组对象

类数组对象如arguments或NodeList可以通过Array.from转换为数组后遍历。

const nodeList = document.querySelectorAll('div');
Array.from(nodeList).forEach(node => {
  console.log(node);
});

遍历字符串

字符串可以通过展开运算符或for...of遍历每个字符。

const str = 'hello';
[...str].forEach(char => {
  console.log(char);
});

中断遍历

for循环可以通过break中断，some和every方法也可以实现类似效果。

for (let i = 0; i < arr.length; i++) {
  if (arr[i] === 2) break;
  console.log(arr[i]);
}

arr.some(item => {
  if (item === 2) return true;
  console.log(item);
});

异步遍历

使用for...of结合await可以处理异步操作。

async function process(array) {
  for (const item of array) {
    await doSomething(item);
  }
}