TypeScript数组过滤：从PhoneTypesAll排除已选电话类型

现有数据 #

PhoneTypesAll（所有电话类型） #

[{"Id":"3","DisplayName":"Fax"},{"Id":"1","DisplayName":"Home"},{"Id":"4","DisplayName":"Mobile"},{"Id":"2","DisplayName":"Office"},{"Id":"5","DisplayName":"Other"}]

PhoneTypesSelected（已选中的关联电话记录） #

[{"PhoneNumberId":127436,"ContactId":22222,"IsPrimary":true, "PhoneType":  {"Id":"2","DisplayName":"Office"},"PhoneNumber":"111111111","Extension":"","DisplayPhoneNumber":"111-111-1111"},{"PhoneNumberId":127437,"ContactId":22222,"IsPrimary":false,"PhoneType":{"Id":"3","DisplayName":"Fax"},"PhoneNumber":"111111111","Extension":null,"DisplayPhoneNumber":"111-111-1111"},{"PhoneNumberId":173825,"ContactId":22222,"IsPrimary":false,"PhoneType":{"Id":"4","DisplayName":"Mobile"},"PhoneNumber":"111111111","Extension":"","DisplayPhoneNumber":"111-111-1111"}]

需求 #

在TypeScript中过滤PhoneTypesAll，仅保留未出现在PhoneTypesSelected中的电话类型，期望结果：

[{"Id":"1","DisplayName":"Home"},{"Id":"5","DisplayName":"Other"}]

错误的尝试代码 #

this.sourcePhoneTypes = this.PhoneTypesAll.filter(item => !this.PhoneTypesSelected.some(itemToBeRemoved => itemToBeRemoved['Id'] == item['Id']));

问题原因 #

PhoneTypesSelected中的每条记录，电话类型的Id嵌套在PhoneType对象内部，并非顶层属性，所以itemToBeRemoved['Id']会获取到undefined，导致过滤逻辑完全失效。

正确实现代码 #

this.sourcePhoneTypes = this.PhoneTypesAll.filter(item => 
  !this.PhoneTypesSelected.some(selected => selected.PhoneType.Id === item.Id)
);

性能优化（数据量大时推荐） #

如果PhoneTypesSelected数据量较大，先提取所有已选中的Id存入Set，可大幅提升过滤效率：

const selectedTypeIds = new Set(this.PhoneTypesSelected.map(selected => selected.PhoneType.Id));
this.sourcePhoneTypes = this.PhoneTypesAll.filter(item => !selectedTypeIds.has(item.Id));

内容的提问来源于stack exchange，提问作者Jeff O'Connell