如何修改getLabels函数以规避ESLint的for..in循环相关报错？

针对你遇到的ESLint提示，这里有两种简单的修改方式，都能消除错误提示，同时让代码更健壮：

方案一：使用Object.keys()（推荐） #

这是ESLint更推荐的写法，因为Object.keys()只会返回对象自身的可枚举属性键，自动跳过原型链上的属性，不用手动过滤。修改后的函数可以简化成这样：

getLabels(state) {
  // 直接判断report是否存在，存在就返回它的键数组，否则返回空数组
  return state.report.data.report ? Object.keys(state.report.data.report) : [];
}

如果想要保留原来的分步写法，也可以这么写：

getLabels(state) {
  const labels = [];
  if (state.report.data.report) {
    // 用扩展运算符直接把所有键推入数组
    labels.push(...Object.keys(state.report.data.report));
  }
  return labels;
}

方案二：给for...in循环添加hasOwnProperty检查 #

如果你想继续使用for...in循环，只需要在循环内部加一个判断，确保当前遍历的属性是对象自身的，而不是来自原型链：

getLabels(state) {
  const labels = [];
  if (state.report.data.report) {
    for (const key in state.report.data.report) {
      // 过滤原型链上的非预期属性
      if (state.report.data.report.hasOwnProperty(key)) {
        labels.push(key);
      }
    }
  }
  return labels;
}

为什么ESLint会提示这个问题？ #

for...in循环默认会遍历对象原型链上的所有可枚举属性，如果有人在代码里给Object.prototype添加了自定义属性（比如Object.prototype.customKey = 'test'），你的原代码就会把这些不属于state.report.data.report的属性也加入labels数组，导致数据错误。上面两种方法都能避免这个问题，其中Object.keys()写法更简洁高效，是优先推荐的方案。

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