无限分配TypeScript内存？

Question

I have custom property that stores objects of class Menu:

private menu: Menu[] = [];

Where class Menu :

export class Menu {
  constructor(public url: string, public title: string, public submenu: Menu[], public role: string, public avaliable: boolean) {
  }
}

In class service MenuService I fill up this.menu :

 this.menu = [
      new Menu('/dashboard/p', 'menu_zavuc_1', null, 'Principal', true),
      new Menu('/school/%school_id%/h/management', 'menu_zavuc_2', null, 'Principal', true),
      new Menu('/school/%school_id%/h/planning', 'menu_zavuc_3', null, 'Principal', true)];

There is another method in the same class MenuService :

public getMenuItems(profile: MenuHeader): IMenuItem[] {

    let arr: IMenuItem[] = [];
    this.menu.filter(function (element: Menu) {
      return element.role == profile.role();
    });

    let arrOut: IMenuItem[] = [];

    for (let i = 0; i < arr.length; i++) {

       let url = arr[i].url.replace('%school_id%', profile.organizationId().toString());
      url = url.replace('%pupil_id%', profile.getId().toString());

      arrOut.push({
        url: arr[i].url,
        title: arr[i].title,
        role: arr[i].role
      });
    }
    return arrOut;
  } 

Method getMenuItems is called from template:

<div *ngFor="let menu of menuService.getMenuHeaders()">
   <div *ngFor="let item of menuService.getMenuItems(menu)"></div>
</div>

As you can see it is loop in loop.

Problem is when I call method getMenuItems() it invokes unlimited memory allocation.

I think cause is in this.menu.filter() when I try reuse the same object this.menu for some operations. Possible each time this.menu is linked to previous values.

Maybe to clone this.menu ?

If comment body of getmenuItems() and write only: console.log(profile.role()); it works fine

If rewrite function on:

public getMenuItems(profile: MenuHeader): IMenuItem[] {
    let list: IMenuItem[] = [];


    let l = {
      url: '',
      title: 'sss',
      role: 'sdadad'
    };

    let a = {
      url: '',
      title: 'sss',
      role: 'sdadad'
    };

    list.push(l);
    list.push(a);

    return list;
}

It works fine!

Answer 1

I am not sure if this will fix your memory problem, but it seems to me that there are a few mistakes in the code.

Be aware that .filter on an array does not change the array, it only RETURNS a filtered array.

this.menu.filter(function (element: Menu) {
      return element.role == profile.role();
    });

Also you are looping over arr but that variable stays initialized with [].

So, did you mean the following?

let arr: IMenuItem[] = this.menu.filter(function (element: Menu) {
      return element.role == profile.role();
    });

Also do you really want to return arr ? It seems that you really wanted to return arrOut

That could be written as:

public getMenuItems(profile: MenuHeader): IMenuItem[] {
    return this.menu
      .filter( (element: Menu) => element.role == profile.role() )
      .map( (element: Menu):MenuItem => {
          return { 
              url: element.url,
              title: element.title,
              role: element.role
          }
      });
}

In this way, all your operations on "this.menu" are pure local in your method.

Perhaps that helps to tackle your memory problem

warm regards