Encontré un error realmente extraño al cambiar una propiedad de nombre de objeto, luego ordenar una matriz. Es muy lento ! Y no entiendo porque...

Lo he simplificado aquí al hacer clic en los archivos: error de ordenación de stackblitz (utilice Firefox, porque Chrome ni siquiera lo hace ...)

Mi objeto:

 export interface MyFile { name: string; }

Tengo un archivo Html simple como este:

 <div *ngFor="let file of filesA" (click)="sortA(file)"> {{ file.name }} </div> <div *ngFor="let file of filesB" (click)="sortB(file)"> {{ file.name }} </div>

Yo inicio archivos aquí:

 ngOnInit() { for (let i = 0; i < 20000; i++) { this.filesA.push({ name: 'File A' + i }); } this.sortFile(this.filesA); for (let i = 0; i < 20000; i++) { this.filesB.push({ name: 'File B' + i }); } this.sortFile(this.filesB); }

Tengo un método que ordena una lista por nombre

 sortFiles(files: MyFile[]): void { files.sort((a, b) => { return a.name.localeCompare(b.name); }); }

Entonces, tengo dos escenarios de casos:

archivosA: cambiando el nombre, luego ordenando la lista (como todos lo hacen).

 sortA(file: MyFile) { file.name = 'ZZ'; this.sortFile(this.filesA); }

archivosB: cree un clon, elimine el archivo, inserte el clon, cambie el nombre del clon y luego ordene la lista.

 sortB(file: MyFile) { const clonedFile: MyFile = Object.assign({}, file); this.filesB.forEach((removeFileB, index) => { if (removeFileB.name != clonedFile.name) return; this.filesB.splice(index, 1); }); clonedFile.name = 'ZZ'; this.filesB.push(clonedFile); this.sortFile(this.filesB); }

• los archivos B son 20 veces más rápidos que los archivos A. Pero hacen exactamente lo mismo.
• El error solo aparece cuando el nombre debe ir al final de la lista. si pones file.name = 'AA'; , entonces es rápido...

¿Tiene alguna sugerencia para no tener que clonar el objeto? (que es bastante sucio) o esto podría ser un error crítico en Angular?