tslint / codelyzer / ng lint 错误：“for (... in ...) 语句必须使用 if 语句过滤”

小编典典

tslint / codelyzer / ng lint 错误：“for (... in ...) 语句必须使用 if 语句过滤”

all

皮棉错误消息：

src/app/detail/edit/edit.component.ts[111, 5]: for (… in …) 语句必须用 if
语句过滤

代码片段（它是一个工作代码。它也可以在angular.io
表单验证部分获得）：

for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }

知道如何解决这个 lint 错误吗？

阅读 81

2022-05-04

共1个答案

小编典典

为了解释tslint 指出 的实际问题，引用 JavaScript 文档中的 for…in
语句：

循环将遍历对象本身的所有可枚举属性以及对象从其构造函数的原型继承的那些属性（原型链中更接近对象的属性会覆盖原型的属性）。

因此，基本上这意味着您将获得您可能不希望获得的属性（来自对象的原型链）。

为了解决这个问题，我们只需要迭代对象自己的属性。我们可以通过两种不同的方式来做到这一点（正如@Maxxx 和@Qwertiy 所建议的那样）。

第一个解决方案

for (const field of Object.keys(this.formErrors)) {
    ...
}

这里我们使用Object.Keys()方法，它返回一个给定对象自己的可枚举属性的数组，其顺序与
for…in 循环提供的顺序相同（不同之处在于 for-in 循环枚举属性原型链也是如此）。

第二种解决方案

for (var field in this.formErrors) {
    if (this.formErrors.hasOwnProperty(field)) {
        ...
    }
}

在此解决方案中，我们迭代对象的所有属性，包括其原型链中的属性，但使用Object.prototype.hasOwnProperty()方法，该方法返回一个布尔值，指示对象是否具有指定的属性作为自己的（非继承的）属性，以过滤继承的属性出来。

2022-05-04