vue3几种for循环对比:

vue3 对数据列表循环,修改指定下标的值

1>forEach循环
const setItemsInactive = (index: number) => {
  list.value.forEach((item, idx) => {
    if (idx !== index) {
      item.isActive = false;
    }
  });
};
  
2>for...of循环
const showSectionAction = (index: number) => {
  for (const [idx, item] of ticketList.value.entries()) {
    if (idx !== index) {
      item.showAction = false;
    }
  }
  ticketList.value[index].showAction = !ticketList.value[index].showAction;
};

forEach 和 for...of 的对比

• forEach 简洁性：在需要遍历每个元素并访问索引的情况下，forEach 确实更简洁，不需要解构。
• for...of 的灵活性：在某些场景下，for...of 提供了更多控制流的灵活性。比如，可以在循环中使用 break 和 continue，而 forEach 不支持这些控制流操作（如果需要提前退出循环时，for...of 更方便）。

选择的建议

如果遍历逻辑简单而且不涉及复杂的控制流（如提前退出），forEach 是非常好的选择。您可以放心地使用 forEach，除非项目的 lint 或格式化工具有特定的要求。

3>经典的for循环
for(let i = 0; i < list.value.length;i++){
//逻辑
}
原生 for 循环可以避免迭代器创建（如 forEach 或 for...of 循环），在处理大量数据时性能稍有提升，特别适合对性能要求高的项目。
  
4>for...in循环
适用于：主要用于遍历对象的可枚举属性，不推荐用于数组，因为它遍历的是属性名而不是数组值。
特性：遍历对象的键（属性名），可用于对象的动态属性操作。
局限性：for...in 会遍历对象原型链上的所有可枚举属性（除非使用 hasOwnProperty 进行检查），可能带来意外结果。
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    // 逻辑
  }
}

总结:

选择建议
数组遍历：优先考虑 forEach 或 for...of，尤其是在写法简洁性和可读性更重要的情况下。
复杂控制流：当需要在循环中提前退出或跳过某些元素时，for...of 更合适。
对象遍历：如果是普通对象，推荐使用 for...in 或 Object.keys 结合 forEach。
性能和灵活性：在高性能要求的场景下，传统的 for 循环（for (let i = 0; i < length; i++)）依然是一个非常好的选择。