tslint/codelyzer/ng lint 错误:“for (... in ...) 语句必须用 if 语句过滤"； [英] tslint / codelyzer / ng lint error: "for (... in ...) statements must be filtered with an if statement"

问题描述

皮棉错误消息:

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

src/app/detail/edit/edit.component.ts[111, 5]: for (... in ...) statements must be filtered with an if statement

代码片段(这是一个工作代码.它也可以在 angular.io 表单验证部分):

Code snippet (It is a working code. It is also available at angular.io form validation section):

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 错误吗?

Any idea how to fix this lint error?

推荐答案

为了解释实际问题 tslint 指出的，引用自for... 的 JavaScript 文档在声明中:

To explain the actual problem that tslint is pointing out, a quote from the JavaScript documentation of the for...in statement:

循环将遍历对象的所有可枚举属性本身和对象从其构造函数的原型继承的那些(更接近原型链中对象的属性覆盖原型的属性).

The loop will iterate over all enumerable properties of the object itself and those the object inherits from its constructor's prototype (properties closer to the object in the prototype chain override prototypes' properties).

所以，基本上这意味着您将获得您可能不希望获得的属性(从对象的原型链中).

So, basically this means you'll get properties you might not expect to get (from the object's prototype chain).

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

To solve this we need to iterate only over the objects own properties. We can do this in two different ways (as suggested by @Maxxx and @Qwertiy).

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

这里我们使用 Object.Keys() 方法返回给定对象自己的可枚举属性的数组，其顺序与 for...in 循环提供的顺序相同(区别在于 for-in 循环也枚举原型链中的属性).

Here we utilize the Object.Keys() method which returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

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

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

In this solution we iterate all of the object's properties including those in it's prototype chain but use the Object.prototype.hasOwnProperty() method, which returns a boolean indicating whether the object has the specified property as own (not inherited) property, to filter the inherited properties out.

这篇关于tslint/codelyzer/ng lint 错误:“for (... in ...) 语句必须用 if 语句过滤"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！