在 Angular 模板表达式中使用函数 Map.prototype.get() 可以吗？

Question

我知道你永远不应该在 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>

Answer 1

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 对象必须使用哈希表或其他方法来实现 平均而言，提供次线性访问时间的机制 关于集合中元素的数量。

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

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

结论：

如果您致力于微优化并且您的集合中有大量元素，那么请考虑将此计算移至专用组件属性。否则只能忍受它。