在Angular模板表达式中使用功能Map.prototype.get可以吗？

问题描述

我知道您永远不要在Angulars模板表达式中使用函数调用，否则它们将被永久调用，并且应用程序将承受极大压力。 （请参阅Medium - Why You Should Never Use Function Calls In Angular Template Expressions）

当使用[] -array-operator时，我也知道可以。例如

<div *ngIf="array[i]"></div>

有人知道这样的模板表达式中可以使用Map.prototype.get（）函数吗？

<!-- the Map is structured like Map<Object,Object[]> -->
<ng-container *ngFor="let elem of someMap.get(keyToAnArray)">
    <app-some-compo [elem]="elem"></app-some-compo>
</ng-container>

解决方法

Angular文档指出可以在模板中编写复杂的模板表达式，但是如果这些表达式不能很快完成，最好避免使用它们。这意味着我们应该避免模板中的长时间可执行计算。

原因是Angular将模板编译成可执行的代码段，这些代码在每个更改检测周期内执行。而且，如果您已经使用Angular已有一段时间，那么您应该注意到在应用程序中执行了多少个变更检测周期。

因此，采用您的模板：

*ngFor="let elem of someMap.get(keyToAnArray)"

我们会有类似的东西：

组件工厂

// part of change detection code starts here
...
i0.ɵɵproperty("ngForOf",ctx.someMap.get(ctx.keyToAnArray));
...

我们需要回答的主要问题是： Map.prototype.get()方法有多快？

来自specification：

地图对象必须使用哈希表或其他实现 平均而言，提供次线性访问时间的机制 集合中元素的数量。

换句话说，我们可以将Map视为哈希表数据结构的实现。它应该超级快地工作。但是执行get方法的速度取决于集合中元素的数量。

搜索速度越慢的元素越多。但是在哈希表结构的情况下，我认为这只是微优化。

结论：

如果您进行微优化，并且集合中包含大量元素，则可以考虑将此计算移至专用组件属性。否则，请忍受它。