如何正确修复ESLint guard-for-in报错且不影响for-in循环正常运行

问题根源 #

1. 初始代码的不合理之处：使用for-in遍历Object.keys(item)返回的数组，for-in设计用于遍历对象可枚举属性，遍历数组不仅效率低，还会触发ESLint的guard-for-in校验，要求过滤原型链上的额外属性。
2. 修改后代码无法执行的原因：

• 你将hasOwnProperty判断写在了for-in循环外部，此时循环变量i还未声明，判断条件永远不成立
• 代码中出现了未定义的pattern变量，判断逻辑完全不匹配业务需求

正确解决方案 #

方案1：按ESLint规则正确使用for-in遍历对象属性

直接遍历item本身，在循环内部加自有属性判断，不需要额外调用Object.keys：

data.forEach(item => {
  for (const key in item) {
    // 仅处理item的自有属性，过滤原型链上的属性，符合guard-for-in规则
    if (item.hasOwnProperty(key)) {
      // 直接使用key和item[key]处理逻辑即可
      //..
    }
  }
});

方案2：规避for-in语法，直接遍历Object.keys返回的数组

Object.keys本身只会返回对象的自有可枚举属性，不需要额外过滤，使用数组遍历方法/for-of不会触发ESLint的guard-for-in校验：

data.forEach(item => {
  // 写法1：用数组forEach遍历
  Object.keys(item).forEach(key => {
    // 处理逻辑
    //..
  })

  // 写法2：用for-of遍历
  // for (const key of Object.keys(item)) {
  //   // 处理逻辑
  //   //..
  // }
});

内容的提问来源于stack exchange，提问作者Sergino