map

1. const courses = [

2.     { name: "HTML", levels: ["L1", "L2"] },

3.     { name: "CSS", levels: ["L1", "L2"] },

4.     { name: "JS", levels: ["L2", "L3", "M1"] }

5. ]

6. 
   

7. const levels = new Set(courses.reduce((acc, { levels: levels }) => ([...acc, ...levels]), []));

8. 
   

9. const programme = courses.reduce((a, { levels: levels, name }) => {

10.     for (let level of levels) {

11.         if (!a[level]) a[level] = [];

12.         a[level].push(name);

13.     }

14.     return a;

15. }, {});

16. 
    
17. 
    

18. const menu = Object.entries(programme).map(([level, courses]) => {

19.     return {

20.         title: level,

21.         subnav: courses.map((course) => {

22.             return { title: course }

23.         })

24.     }

25. })

26. 
    

27. console.dir(JSON.stringify(menu));

Affiche.

[

{"title":"L1","subnav":[{"title":"HTML"},{"title":"CSS"}]}

,{"title":"L2","subnav":[{"title":"HTML"},{"title":"CSS"},{"title":"JS"}]}

,{"title":"L3","subnav":[{"title":"JS"}]}

,{"title":"M1","subnav":[{"title":"JS"}]}

]

this = un paramétre !

This doit être vu comme un paramétre.

This permet d'économiser du code en mémoire.

Exemple de code

1. let user = { name: "John", f: say };
2. let admin = { name: "Admin", f: say };
3. 
   
4. function say(what="Hi") {
5.   console.log(`${what} ${this.name}`);
6. }
7. 
   
8. // these calls have different this
9. // "this" inside the function is the object "before the dot"
10. user.f("Hello"); // John  (this == user)
11. admin.f("Please"); // Admin  (this == admin)
12. 
    
13. admin['f']();

Pour connaitre la valeur du paramétre this. Il faut regarder l'objet qui appelle la fonction !

Erreur classique.

Il est important de comprendre que this n'est pas lié à user lors de la définition

Comme un paramétre classique, c'est lors de l'appel de la méthode que l'on connait la valeur de this.

Autre exemple :