在 ES6 中处理未定义的变量或属性答案

【问题标题】：Handling undefined variables or properties in ES6在 ES6 中处理未定义的变量或属性
【发布时间】：2019-11-17 14:18:51
【问题描述】：

在我的特殊情况下，我使用的是 Angular 和 Firebase Firestore，但是，这个问题也可能与 Typescript 和纯 Javascript 有关。

我的应用程序完全取决于我从 Firestore 获取的数据。我将生成的最小的、可重现的代码示例如下所示。

TS：

export class EditStudentComponent implements OnInit {

  user:Object = {};

  ngOnInit() {
      this.NgProgress.start()
      this.fb.user$.subscribe(user => {
        this.user = user;
      })
  }
}

HTML：

User-Info:
Name: {{ user.name }}<br>
Age: {{ user.age }}<br>

在这种情况下，不存在的属性 name 或 age 会引发错误。有没有比对每个属性都做这样的事情更好的方法？

export class EditStudentComponent implements OnInit {

  user:Object = {};

  ngOnInit() {
      this.NgProgress.start()
      this.fb.user$.subscribe(user => {
        this.user = user;

        //Setting default values for all properties individually
        this.user.name = 'name' in this.user ? (this.user as any).name : 'No value found';
        this.user.age = 'age' in this.user ? (this.user as any).age : 'No value found';
      })
  }
}

【问题讨论】：

我会在 HTML 中这样做：{{ user.name || "N/A" }}。这样，情况就可以在适当的上下文中得到处理。例如，如果您在某种 API 调用中使用该对象，那么“名称”属性中的“未找到值”可能不是您想要的。
您可以使用这些默认值设置一个user 对象，然后将其与您从订阅中返回的user 合并。
在 html 中可以这样使用：姓名：{{ user?.name }}
年龄：{{ user?.age }}

标签： javascript angular ecmascript-6 undefined

【解决方案1】：

您的情况有多种解决方案，您不需要为每个属性添加额外的 ts 代码。

在属性前使用问号?检查是否存在，则输出为空。

{{ user?.name }}

对于嵌套属性也是一样的。

{{ user?.name?.first }}

使用或运算符||，然后您可以决定您的默认值。

{{ user?.name || 'Default name' }}

或者您编写一个管道，这将是一种矫枉过正并且与第二种解决方案相同的方式。

【讨论】：