Angular响应式表单中while与if条件的使用差异及性能影响

功能与性能层面 #

你这里用while和if的实际功能完全一致，性能上也没有任何差异。因为while循环里第一次判断pristine为true时就直接return了，循环只会执行一次，本质和if的单次布尔判断逻辑完全相同，不会产生额外的性能开销，也不会出现无限循环的问题（毕竟return会直接终止当前回调函数）。

代码语义与可读性层面 #

while的语义是「当条件成立时重复执行代码块」，但你的场景只是想「如果字段未触碰（pristine）就跳过后续逻辑」，用if才是符合语义的写法。用while会让其他维护代码的开发者困惑——误以为这里有循环执行的需求，或者担心是否存在潜在的循环风险，反而降低了代码的可读性，完全没必要。

更优雅的实现方式 #

其实你可以利用RxJS的操作符在订阅前就过滤掉未触碰状态的变更，更贴合Angular响应式表单的编程风格：

import { filter } from 'rxjs/operators';

// ...

this.form.get('type').valueChanges
  .pipe(
    filter(() => !this.form.get('type').pristine)
  )
  .subscribe(newValue => {
    if (newValue === 'house') {
       this.form.get('model').disable();
       this.form.get('city').enable();
    } else {
       this.form.get('model').enable();
       this.form.get('city').disable();
    }
  });

这样回调函数里就不需要额外的判断逻辑，代码更简洁清晰。

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