javascript - 如何在不复制数组的情况下创建对现有数组的新引用

Question

是否可以在不遍历数组的情况下创建对数组的新引用？ 我的问题是我有一个纯 Angular 管，它无法检测推送/弹出更改。我想避免这样的解决方案:

this.array = this.array.filter(e=>true)

这增加了更新引用的复杂性。 我已经尝试了我想到的第一件事，但它不起作用(管道没有检测到任何变化)，而且我对 js/ts 不太熟悉，不知道为什么它不起作用。

const newRef = this.array;
this.array = null;
this.array = newRef

我有一个管道，它获取对象数组和过滤器数组并返回过滤对象数组。

@Pipe({
  name: 'eventFilter'
})
export class EventFilterPipe implements PipeTransform {

  transform(events: EventDtos[], filters:Filter[]): any {
     //return filtered events
  }

管道使用:

<div  class="event" *ngFor="let event of events  | eventFilter:filters">
   html stuff
</div>

从过滤器推送/弹出过滤器后，不会调用管道的转换，因此我使用此代码强制transform调用:

this.filters = this.filters.filter(e=>true)

但此时我不知道哪种方法更快，是这种方法还是不纯的管道。因此，理想情况下，我想保留纯管道并更新 filters 引用而不增加复杂性

Answer 1

我不建议您使用不纯的管道，它会在每次更改检测时执行并过滤事件，并且每秒可能有数百个更改检测。

你尝试改变引用怎么样，实际上它并没有改变引用，你只是改变了一个包含引用的变量:

const newRef = this.array; // newRef references the array
this.array = null;
this.array = newRef // this.array references the same array, nothing is changed

因此，像您一样复制数组是更好的解决方案，但还有更简单的方法:

this.array = [...this.array];
// or
this.array = this.array.slice();

另一个解决方案是使用 Subject和 AsyncPipe 。在这种情况下，不需要复制数组。如果数组很大，或者过滤器经常改变，这可能是首选方式:

@Component({...})
class MyComponent {
    readonly filters$ = new BehaviourValue<Filter>([]);

    ...
    addFilter(filter: Filter): void {
        this.filters$.value.push(filter);
        this.filters$.next(this.filters$.value);
    }
}

<div  class="event" *ngFor="let event of events | eventFilter:(filters$ | async)">
   html stuff
</div>