可以在 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 文档指出可以在模板中编写复杂的模板表达式，但如果这些表达式不能快速完成，最好避免使用它们。这意味着我们应该避免在模板中进行长时间的 executable 计算。

原因是Angular将模板编译成executable段代码，在每个变更检测周期中执行。如果您已经使用 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 object must be implemented using either hash tables or other mechanisms that, on average, provide access times that are sublinear on the number of elements in the collection.

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

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

结论：

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

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

Is it ok to use the function Map.prototype.get() inside an Angular Template Expression?

angular

ngfor

angular-ng-if

property-binding