[ES6] Itération deux structure Map

**sinzen** · 22/11/2017, 15h17

Salut à tous,

Pour effectuer des comparaisons,
Je voudrait itérer deux structure Map en javascript (en même temp).

je fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function compare(map1, map2)
{
  map1.foreach((value, key) => {
      console.log("value of map1" + value);
      console.log("value of map2" + map2[value]);
  });
 }

mon 2e console affiche systemtiquement undifined

est-ce que j'itère bien sur ma 2e map ou je dois créer un boucle suplementaire?
il est possible d'utiliser la recursion avec une seule boucle ou sans ?
merci à vous.

**Watilin** · 22/11/2017, 17h22

Tu dois utiliser key

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
let bidule = { reponse: 42 };
console.log(bidule.reponse);
console.log(bidule["reponse"]);
 
let key = "reponse";
console.log(bidule[key]);

Du coup :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function compare(map1, map2)
{
  map1.foreach((value, key) => {
      console.log("value of map1" + value);
      console.log("value of map2" + map2[key]);
      //.................................^^^...
  });
 }

est-ce que j'itère bien sur ma 2e map ou je dois créer un boucle suplementaire?
il est possible d'utiliser la recursion avec une seule boucle ou sans ?

Si tes deux maps sont identiques, tu peux les parcourir avec une seule et même boucle. Idem pour la récursion. Et si elles ne sont pas identiques, tu n’as pas besoin de continuer la comparaison, tu peux faire remonter le résultat.

Bon codage

**sinzen** · 22/11/2017, 19h49

Merci pour ta réponse Watilin.

ça marche pour moi comme ceci (Map):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
console.log("map1 => ", value);
console.log("map2 => ", map2.get(key));

Après cela ca se complique
je voudrait iterer les deux Map en même temps
je fait ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function compare(map1, map2)  {
map1.forEach((value,key)=>{
 compare(value,map2.get(value));

j'ai un erreur:

TypeError: map1.forEach is not a function

**danielhagnoul** · 22/11/2017, 22h02

Un objet Map n'est pas un objet Array !

Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        function compareMap( mapA, mapB ){
                                const
                                        resultTrue = "Les deux Map sont identiques",
                                        resultFalse = "Les deux Map sont différentes";
                                        
                                let
                                        boolOK = false;
                                
                                klog( "*****" );
                                
                                if ( mapA.size !== mapB.size ){
                                        klog( `Les Map n'ont pas la même taille` );
                                } else {
                                        for ( const [ key, value ] of mapA.entries() ){
                                                if ( ! mapB.has( key ) || value !== mapB.get( key ) ){
                                                        klog( `Les Map n'ont pas la même clé ou la même valeur` );
                                                        boolOK = false;
                                                        break;
                                                } else {
                                                        boolOK = true;
                                                }
                                        }
                                }
                                
                                klog( boolOK ? resultTrue : resultFalse );
                        }
                        
                        { // test 1
                                let
                                        map1 = new Map( [
                                                [ 1, 'one' ],
                                                [ 2, 'two' ],
                                                [ 3, 'three' ],
                                        ] ),
                                        map2 = new Map();
                                
                                map2.set( "key1", "value1" );
                                map2.set( "key2", "value2" );
                                map2.set( "key3", "value3" );
                                map2.set( "key4", "value4" );
                                map2.set( "key6", "value5" );
                                
                                
                                compareMap( map1, map2 );
                        }
                        
                        { // test 2
                                let
                                        map1 = new Map( [
                                                [ 1, 'one' ],
                                                [ 2, 'two' ],
                                                [ 3, 'three' ],
                                        ] ),
                                        map2 = new Map();
                                
                                map2.set( "key1", "value1" );
                                map2.set( "key2", "value2" );
                                map2.set( "key3", "value3" );
                                
                                
                                compareMap( map1, map2 );
                        }
                        
                        { // test 3
                                let
                                        map1 = new Map( [
                                                [ 1, 'one' ],
                                                [ 2, 'two' ],
                                                [ 3, 'three' ],
                                        ] ),
                                        map2 = new Map();
                                
                                map2.set( "1", "one" );
                                map2.set( "2", "two" );
                                map2.set( "3", "three" );
                                
                                
                                compareMap( map1, map2 );
                        }
                        
                        { // test 4
                                let
                                        map1 = new Map( [
                                                [ 1, 'one' ],
                                                [ 2, 'two' ],
                                                [ 3, 'three' ],
                                        ] ),
                                        map2 = new Map();
                                
                                map2.set( 1, "one" );
                                map2.set( 2, "two" );
                                map2.set( 3, "three" );
                                
                                
                                compareMap( map1, map2 );
                        }
 
                        // fin code du test
                        
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>
</html>

**Watilin** · 23/11/2017, 01h14

J’avais tiqué sur le forEach aussi, mais j’ai vérifié, c’est standard, les maps ont une méthode forEach. Si ça fait une erreur en l’occurence, c’est parce que notre ami sinzen ne teste pas au début de sa fonction s’il a affaire à une map ou à une valeur primitive.

Sinzen, alternativement tu peux utiliser cette belle boucle proposée par Daniel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for ( const [ key, value ] of mapA.entries() ){

Je t’avais déjà parlé de Object.entries(), tu te souviens ? Eh bien ça fonctionne pareil. Dans tous les cas, que tu choisisses la solution fonctionnelle (forEach) ou impérative (for..of), tu dois tester le type de tes arguments.

Daniel j’ai une question hors sujet pour toi : tu fais confiance à CloudFlare ? Note, je n’ai pas d’opinion a priori sur ce sujet.

**danielhagnoul** · 23/11/2017, 22h06

Envoyé par Watilin

[...] Daniel j’ai une question hors sujet pour toi : tu fais confiance à CloudFlare ? Note, je n’ai pas d’opinion a priori sur ce sujet.

J'ignorai l'existence de Cloudflare, je n'ai donc aucun avis sur lui.

S'il s'agit de trouver un bon fournisseur VPN, j'utilise Avast avec bonheur depuis que le service existe (2 ans, je crois, et je viens de renouveler mon abandonnement pour 2 ans).

J'utilise Avast Premium et trois services complémentaires : VPN SecureLine, Mots de passe et Avast Cleanup.

Bien entendu on ne peut pas faire n'importe quoi avec le VPN et tout cela n'est pas gratuit. Mais il y a souvent des remises importantes surtout pour les abonnements de longue durée (30 à 50%).

Aperçu des connexions disponibles :

Nom : AvastVPN.PNG
Affichages : 181
Taille : 118,3 Ko

Nom : AvastVPN.PNG
Affichages : 181
Taille : 118,3 Ko

**Watilin** · 23/11/2017, 22h47

Si je te posais la question, c’est parce qu’il y a ça dans ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/locale/fr.js"></script>

Et je pensais que c’était toi qui l’avais écrit.

**danielhagnoul** · 24/11/2017, 11h16

Envoyé par Watilin

Si je te posais la question, c’est parce qu’il y a ça dans ton code : [...]

Ho !

J'utilise souvent des liens venant du serveur de code https://cdnjs.com/#. C'est un copier-coller quasi automatique, la plupart du temps je ne fais pas attention au chemin du lien.

**sinzen** · 24/11/2017, 11h36

Merci pour vos réactions.

j'arrive bien a parcourir mes Map et savoir si elles sont identiques.

maintenant je veux retourner une map avec l'intersection de ces deux map..

afin de recuperer les elements se trouvant ou non dans chaqune des Map

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function testFunction(map1,map2) {
    let mMapIntersec = new Map();
    map1.forEach((value,key)=> {
        if(typeof value === 'object')
        {
            if(map2.has(key) === false)
            {
                if(map2.get(key) !== undefined)
                    mMapIntersec.set(key,testFunction(value,map2.get(key)));
                else
                    mMapIntersec.set(key,testFunction(value,map2));
            }
        }
        else{
            if(map2.has(key))
                mMapIntersec.set(key,value);
        }
    })
    return mMapIntersec;
}

Je recupere bien l'intersection.

Mais peut être que vous pourrez m'aider sur cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
if(otherKeys.has(key) === false)
{...}

je voudrait comme comme je l'ai dit, retourner une map avec les elements qui ne sont pas dans une des map.
seulement il ne rentre jamais dans cette condition. Pourtant mes map ne sont pas identique.
Comme je travaille sur plusieurs niveaux idéalement je voudrais récupérer toutes les clés parents..

**Watilin** · 24/11/2017, 23h34

Je ne suis pas sûr de comprendre

Quand map2.get(key) est undefined, tu passes map2 à la place. Ça décale les niveaux, non ?

Si je comprends bien ta question, tu cherches à faire l’équivalent d’une jointure externe (FULL OUTER JOIN) en SQL.

Je ne connais pas la façon optimale de faire ça. Mais intuitivement je me dis qu’il faut commencer par faire une union de toutes les clés, du coup j’ai bricolé ceci en utilisant un Set et l’opérateur de décomposition.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
let map1, map2, keySet;
 
map1 = new Map([ [ "a", 56 ], [ "c", 51 ] ]);
map2 = new Map([ [ "b", 11 ], [ "c", 97 ] ]);
 
keySet = new Set([ ...map1.keys(), ...map2.keys() ]);
console.log(keySet);
 
for (let key of keySet) {
  console.log("key %s in map1: %s, in map2: %s",
    key, map1.has(key), map2.has(key));
}

Pour passer ça en récursif, il faut réfléchir à la structure de données que tu veux récupérer à la fin. Si tu n’as pas besoin de conserver les valeurs, tu peux réutiliser le « squelette » et coder la présence ou non d’une clé avec des constantes, par exemple LEFT_ONLY et RIGHT_ONLY pour indiquer que la clé est présente seulement à gauche ou seulement à droite, respectivement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const EQUAL      = Symbol("equal");
const DIFFERENT  = Symbol("different");
const LEFT_ONLY  = Symbol("left only");
const RIGHT_ONLY = Symbol("right only");
 
function compareMaps(arg1, arg2) {
  if ((arg1 instanceof Map) && (arg2 instanceof Map)) {
    let result = new Map();
    let keySet = new Set([ ...arg1.keys(), ...arg2.keys() ]);
    for (let key of keySet) {
      if (!arg1.has(key)) {
        result.set(key, RIGHT_ONLY);
      }
      else if (!arg2.has(key)) {
        result.set(key, LEFT_ONLY);
      }
      else { // la clé est présente des deux côtés
        result.set( key, compareMaps(arg1.get(key), arg2.get(key)) ); // appel récursif
      }
    }
    return result;
  }
 
  else { // au moins un des deux arguments n’est pas une map
    return (arg1 === arg2) ? EQUAL : DIFFERENT;
  }
}

Je ne sais pas si ça répond à ta question.

Note : j’utilise des Symbol pour avoir une unicité garantie, mais ça marche aussi avec de simples chaînes (… Ou des puissances de 2…). À l’avenir on aura de vrais enum en JS, ça sera plus confortable

Si tu veux conserver les valeurs, il ne te sera pas difficile de remplacer les constantes dans le dernier return par le couple de valeurs, par exemple dans un tableau : return [ arg1, arg2 ];.

**danielhagnoul** · 25/11/2017, 23h06

Envoyé par Watilin

[...] Mais intuitivement je me dis qu’il faut commencer par faire une union de toutes les clés, du coup j’ai bricolé ceci en utilisant un Set et l’opérateur de décomposition. [...]

Bonne idée !

Envoyé par sinzen

[...] maintenant je veux retourner une map avec l'intersection de ces deux map afin de recuperer les elements se trouvant ou non dans chaqune des Map [...]

On peut facilement remplir une Map avec les éléments communs et même éliminés les éléments communs. Exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
                
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.4.0.js"></script>
	<script>
    'use strict';
                
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
      // code du test
 
 
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                                                
                        function compareAndModifyMap( mapA, mapB, mapResult ){
                                if ( kGetType( mapA ) === "map" && kGetType( mapB ) === "map" && kGetType( mapResult ) === "map" ){
                                        
                                        const
                                                keySet = new Set( [ ...mapA.keys(), ...mapB.keys() ] );
                                        
                                        // debug
                                        klog( `keySet = ${ [ ...keySet ] }` );
                                        
                                        // remplissage de mapResult
                                        for ( const key of keySet ){
                                                if ( mapA.has( key ) && mapB.has( key ) && ( mapA.get( key ) === mapB.get( key ) ) ){
                                                        mapResult.set( key, mapA.get( key ) );
                                                }
                                        }
                                        
                                        // on peut aussi supprimer les valeurs communes dans mapA et mapB
                                        for ( const key of mapResult.keys() ){
                                                mapA.delete( key );
                                                mapB.delete( key );
                                        }
                                } else {
                                        klog( `Les paramètres de la fonction doivent être des objets Map` );
                                }
                        }
                        
                        { // test 
                                let
                                        map1 = new Map( [
                                                [ 21, "éléphant rose" ],
                                                [ 1, 'one' ],
                                                [ 2, 'two' ],
                                                [ 42, "la réponse" ],
                                                [ 3, 'three' ],
                                        ] ),
                                        map2 = new Map(),
                                        mapR = new Map();
                                
                                map2.set( "Où ?", "nulle part !" );
                                map2.set( 3, "three" );
                                map2.set( "Qui ?", "inconnu");
                                map2.set( 2, "two" );
                                map2.set( 1, "one" );
                                map2.set( "hello", "bonjour" );
                                
                                compareAndModifyMap( map1, map2, mapR );
                                
                                klog( `mapR = ${ [ ...mapR ] }` );
                                klog( `map1 = ${ [ ...map1 ] }` );
                                klog( `map2 = ${ [ ...map2 ] }` );
                        }
 
                        // fin code du test
                        
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
 
	</main>
</body>
</html>

**sinzen** · 26/11/2017, 12h38

Merci pour vos réactions,

par la même je tiens a préciser que j'ai des soucis avec cette ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 const keySet = new Set([...baseKeys.keys(), ...otherKeys.keys()]);

j'ai modifier le fichier tsconfig.json comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 "downlevelIteration": true

voici ce que je fais avec la récursion:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function compareMap(arg1,arg2,mapResult)
{
     if(arg1 instanceof Map && arg2 intanceof Map)
     {
           const keySet = new Set([...arg1.keys(),...arg2.keys()])
           keyset.foreach((value,key) => {
                 ... condition puis traitement recursif
                mapResult.set(key,getUnionCompareKey(arg1.get(key),arg2.get(key)
           })
     }
      else
     { ici je ne traite pas le cas ou c'est un type primitif comme les couples clés valeur de premier niveau}
}

et ma fonction getUnionCompareKey

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function getUnionCompareKey(arg1,arg2)
{
    let mapResult = new Map;
    if((arg1 instanceof Map) && (arg2 instanceof Map)) {
        const keySet = new Set([...arg1.keys(), ...arg2.keys()]);
        keySet.forEach((value,key) => {
            if (!arg1.has(key))
                mapResult.set(key,arg1.get(value))
            else if(!arg2.has(key))
                mapResult.set(key,arg2.get(value))
            else{
                mapResult.set( key,getUnionCompareKey(arg1.get(key),arg2.get(key)));
            }
        })
    }
    return mapResult;
}

comme mes valeurs ne sont pas identiques je veux faire un condition seulement pour les clés.
ps: autre précision j'utilise ts node pour compiler mes fichier Typescript en es6.

cette fonction ne passe pas avec TS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
..
arg1.foreach((value,key)=>{ 
... 
break;   // le break ne passe pas il m'indique un erreur(j'ai essaye le return; également sans succès : jump target cannot cross function boundary
}

**sinzen** · 26/11/2017, 19h41

Je pense abandonné cette idée de structures map

Et je vais plutôt utiliser typescript et ses classes

Pour cela il me faut deux types d'objets :

Une pour stocker mes couples clés valeurs de type primitif

Et une autre classe pour les clés et tableau

Je suis bien sûr la bonne voie ?

**Watilin** · 26/11/2017, 20h29

Envoyé par sinzen

Je pense abandonné cette idée de structures map

Et je vais plutôt utiliser typescript et ses classes

Pour cela il me faut deux types d'objets :

Une pour stocker mes couples clés valeurs de type primitif

Et une autre classe pour les clés et tableau

Je suis bien sûr la bonne voie ?

Aucune idée, je ne connais pas TypeScript. Si tu pars sur cette voie, je ne pourrai pas t’aider.

Envoyé par sinzen

cette fonction ne passe pas avec TS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
..
arg1.foreach((value,key)=>{ 
... 
break;   // le break ne passe pas il m'indique un erreur(j'ai essaye le return; également sans succès : jump target cannot cross function boundary
}

Pour rompre une boucle forEach il faut lancer une exception :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
arg1.foreach((value,key)=>{ 
... 
  throw new Error("break");
}

Ça paraissait une bonne idée à l’époque de la bibliothèque Prototype (avant l’essor de jQuery), c’est beaucoup moins applaudi aujourd’hui. Parce que ça t’oblige à encadrer le forEach d’un bloc try si tu ne veux pas que l’exception remonte toute la pile d’appels. Aujourd’hui les gens considèrent généralement que c’est une mauvaise pratique de lancer une exception dans un autre but que de signaler un cas d’erreur.