tslint/codelyzer/ng lint错误:"for(... in ...)语句必须使用if语句进行过滤"

Question

Lint错误消息:

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

Answer 1

应用@Helzgate的回复的一种更简洁的方法可能是用'替换你的'for .. in'

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

Answer 2

要解释 tslint指出的实际问题,请参阅for ... in语句的JavaScript文档:

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

所以,基本上这意味着你将获得你可能不希望获得的属性(来自对象的原型链).

要解决这个问题,我们只需要遍历对象自己的属性.我们可以通过两种不同的方式实现这一点(如@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()方法,该方法返回一个布尔值,指示对象是否具有指定属性作为自己的(非继承)属性,以进行过滤继承的属性了.

Answer 3

for (const field in this.formErrors) {
  if (this.formErrors.hasOwnProperty(field)) {

for (const key in control.errors) {
  if (control.errors.hasOwnProperty(key)) {

Answer 4

使用Object.keys:

Object.keys(this.formErrors).map(key => {
  this.formErrors[key] = '';
  const control = form.get(key);

  if(control && control.dirty && !control.valid) {
    const messages = this.validationMessages[key];
    Object.keys(control.errors).map(key2 => {
      this.formErrors[key] += messages[key2] + ' ';
    });
  }
});

Answer 5

如果 for(... in ...) 的行为对于您的目的是可以接受/必要的，您可以告诉 tslint 允许它。

在 tslint.json 中，将其添加到“规则”部分。

"forin": false

否则，@Maxxx 有正确的想法

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