JavaScript对象设置类似switch的默认键实现未匹配兜底取值的方法

在JavaScript开发中，我们经常会遇到这样的需求：为自定义对象设置类似switch语句default分支的兜底逻辑，当访问对象的键不存在匹配项时，自动返回预设默认键对应的取值。这类需求在前端样式类映射的场景中十分常见，以下是基于Angular框架的实际使用示例：

实际业务场景示例 #

组件样式文件 app.component.css #

.custom {
  color: aqua;
}

.success {
  color: green;
}

.danger {
  color: red;
}

.wetght {
  font-weight: bold;
}

组件模板文件 app.component.html #

<input class="wetght default {{custom[xyz.abc]}}" [value]="xyz.abc"/><br>
<input class="witght {{custom[xyz.def]}}" [value]="xyz.def"/><br>
<button (click)="abc()">abc</button>

组件逻辑文件 app.component.ts #

export class AppComponent  {
  xyz = {abc: '', def: ''};
  custom = {
    'PASS': 'success',
    'FAIL': 'danger'
  };

  abc() {
    this.xyz = {abc: 'PASS', def: 'uuu'};
  }
}

核心诉求与现存痛点 #

当前逻辑下，当用户触发abc()方法更新状态后，xyz.def的值为'uuu'，这个键在custom映射对象中不存在，模板中插值渲染的类名会为空，无法命中预设的默认样式规则。
开发者此前已经尝试通过ng-class实现兜底匹配效果且运行正常，但希望探索更适配现有模板插值写法的实现方式，在不大幅改造模板结构的前提下，实现「被访问的键在对象中不存在时，自动返回默认键对应值」的效果。

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