salut,
connaissez vous un bon équivalent en ES5 de la fonction ES6 Object.assign ?
Merci d'avance
Version imprimable
salut,
connaissez vous un bon équivalent en ES5 de la fonction ES6 Object.assign ?
Merci d'avance
Ben à part un polyfill (par ex celui de MDN) je vois pas trop ...
:salut:
Un polyfill comme dit par @Marco46 ou extend() de jQuery : http://api.jquery.com/jQuery.extend/
Le pb de ces 2 fonctions c'est qu'elles peuvent ajouter des propriétés supplémentaires à l'objet initial.
En soit cela peut sembler bien, mais en général ces fonctions sont faites pour modifier des paramétrages par défaut, et les éléments supplémentaires arrivent inutilement.
L’autre problème de ces fonctions c'est qu'elles ne font pas de contrôle de typage et que donc on peu changer le type d'un des paramètres ce qui fera planter par la suite...
du coup je me suis fait un wrapper perso pour faire le job.Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 const obj_Params = { a: 1, // valeurs par défaut... b: 2, c: 3 }; const obj_ChoixParams = { a: 7, c: 'changement de type', z: 'juste inutile' }; Object.assign(obj_Params, obj_ChoixParams) console.log ( obj_Params ); /* retour = a: 7 b: 2 c: "changement de type" z: "juste inutile" */
Si ce post intéresse vraiment qq'1 je mettrait le code ici..
ca m'intéresse !
Je l'ai appelé jsoUpdate.
J'ai mis en commentaire un exemple d'utilisation.
attention, il fonctionne différemment de la propriété assign ou du truc de jQueryCode:
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 if (!Object.prototype.jsoUpdate) { Object.defineProperty(Object.prototype, 'jsoUpdate', { value: function(value) { if (this == null) { throw new TypeError('this is null or not defined'); } var to = Object(this); if (value != null) { // Skip over if undefined or null for (var xKey in value) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(value, xKey)) { if (to.hasOwnProperty(xKey)) { if (typeof(to[xKey]) === typeof(value[xKey]) ) { to[xKey] = value[xKey]; } } } } } return to; } }); } /* exemples jsoUpdate: var default_vals = { One_n: 111, two_s: 'UNunUN', tree: '1-1-1', D: { d_n: 456, d_t: 'texte'} }; var change_options = { One_n: 'Deux sur 111', two_s: 2222, tree:'2-2-2', noNeed: 'noNeed', D: { d_n: 789, bof:'eeeeeeeee' } }; console.log(default_vals); default_vals.jsoUpdate(change_options); console.log(default_vals); */
, ni ne fait ses contrôles pour les sous éléments des objets (dans l'exemple l'élément D ) * [c'est fait exprès, j'y met des expressions css pouvant varier ]
je me suis basé sur le polyfill de Mozilla, mais en simplifiant le code pour mes besoins.
;)
Bonjour,c'est le moindre que l'on puisse dire donc il ne respecte pas la spécification de ES6 assign.Citation:
attention, il fonctionne différemment de la propriété assign ou du truc de jQuery
Si l'on fait un rapide test on obtient sur base des objets suivants :
• ES6 assign :Code:
1
2
3
4
5
6
7
8
9
10
11
12 var src = { "key-a": "srce-a", "key-b": "srce-b", "key-c": "srce-c", "key-d": "srce-d" }; var dest = { "key-a": "dest-a", "key-b": "dest-b", "key-c": "dest-c", "key-e": "dest-e" };
donneCode:
1
2 Object.assign(dest, src); console.log("assign : ",JSON.stringify(dest,null, 2));
• polyFill MDN :Code:
1
2
3
4
5
6
7 assign : { "key-a": "srce-a", "key-b": "srce-b", "key-c": "srce-c", "key-e": "dest-e", "key-d": "srce-d" }
donneCode:
1
2 Object.polyFill (dest, src); console.log("polyFill : ",JSON.stringify(dest,null, 2));
• forEach : qui peut convenir dans bien des casCode:
1
2
3
4
5
6
7 polyFill : { "key-a": "srce-a", "key-b": "srce-b", "key-c": "srce-c", "key-e": "dest-e", "key-d": "srce-d" }
donneCode:
1
2 Object.keys(src).forEach(function(ind) { dest[ind] = src[ind]; }); console.log('forEach : ',JSON.stringify(dest,null, 2));
• jsoUpdate :Code:
1
2
3
4
5
6
7 forEach : { "key-a": "srce-a", "key-b": "srce-b", "key-c": "srce-c", "key-e": "dest-e", "key-d": "srce-d" }
donneCode:
1
2 dest.jsoUpdate(src); console.log('jsoUpdate : ',JSON.stringify(dest,null, 2));
on est loin des autres ...Code:
1
2
3
4
5
6 jsoUpdate : { "key-a": "srce-a", "key-b": "srce-b", "key-c": "srce-c", "key-e": "dest-e" }
pas testé jQuery :weird:
@NoSmoking
tu a du zapper en lecture deux ou trois trucs sur mon premier post. :roll:
Citation:
en général ces fonctions sont faites pour modifier des paramétrages par défaut, et les éléments supplémentaires arrivent inutilement.
Mon Wrapper n'a jamais prétendu remplacer la fonction Assign de JavaScript;Citation:
L’autre problème de ces fonctions c'est qu'elles ne font pas de contrôle de typage et que donc on peut changer le type d'un des paramètres
mais de permettre de mettre à jour une liste de paramètres => en général ces fonctions sont faites pour modifier des paramétrages par défaut
ton test est complètement à coté de la plaque :
déjà par les noms que tu donne à tes deux Objet JavaScript => var src ou dest
alors que mon exemple est clair ils portent le nom de default_vals et change_options
donc quand tu utilise mon wrapper en codant : dest.jsoUpdate(src); cela montre que tu n'a rien compris sur son utilité.
parce qu'elle n'est pas faite pour entrer des valeurs sur une"destination", mais pour mettre à jour un objet JavaScript.
C'est d’ailleurs pour cette raison que je lui ai mis dans son nom le mot update (et jso pour JavaScript Object ) [et nom pas AssignBIS] :aie:
A mon tour de te proposer un test comparatif entre mon jsoUpdate et Assign.ce qui donne :Code:
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 var Params_utile = { max_Temperature : 20, msgDepassement : ' la température ne doit pas dépasser 20 degrés' , cssError : { 'background-color': '#FF0509' } }; var EnglishVers = { msgDepassement : ' the temperature should not exceed 20 degrees ' }; var EspVers = { msgDepassement : ' la temperatura no debe exceder los 20 grados' }; var LuxBad_Version = { max_Temperature : " d'Temperatur soll net iwwer 20 Grad sinn", signe_particulier : "ma grand-mère fait du vélo", cssError : " Me ficherais-je des problemes de typage ???" }; var Params_nonUtile = JSON.parse( JSON.stringify( Params_utile ) ); // une manière comme une autre pour dupliquer un objet... var UserLang = "Luxembourgeois"; // utilisation de jsoUpdate switch (UserLang) { case "Anglais": Params_utile.jsoUpdate( EnglishVers ); break; case "Espagnol": Params_utile.jsoUpdate( EspVers ); break; case "Luxembourgeois": Params_utile.jsoUpdate( LuxBad_Version ); break; } // utilisation de assign ........................ switch (UserLang) { case "Anglais": Object.assign( Params_nonUtile, EnglishVers ); break; case "Espagnol": Object.assign( Params_nonUtile, EspVers ); break; case "Luxembourgeois": Object.assign( Params_nonUtile, LuxBad_Version ); break; } console.log("Params_utile : ",JSON.stringify(Params_utile,null, 2)); console.log("Params_nonUtile : ",JSON.stringify(Params_nonUtile,null, 2));
Params_utile : {
"max_Temperature": 20,
"msgDepassement": " la température ne doit pas dépasser 20 degrés",
"cssError": {
"background-color": "#FF0509"
}
}
Params_nonUtile : {
"max_Temperature": " d'Temperatur soll net iwwer 20 Grad sinn",
"msgDepassement": " la température ne doit pas dépasser 20 degrés",
"cssError": " Me ficherais-je des problemes de typage ???",
"signe_particulier": "ma grand-mère fait du vélo"
}
Rassures toi je lis bien tout et j'ai bien compris le but de ta fonction, je ne nies son utilité dans ton cas personnel, seulement voilà, la question posée par mapmip est
et le résultat attendu est :Citation:
connaissez vous un bon équivalent en ES5 de la fonction ES6 Object.assign ?
donc comme dit, ta fonction ne respecte pas la spécification de ES6 Object.assign, elle fait autre chose ...Citation:
Envoyé par ECMAScript® 2015
PS : par contre tu peux toujours proposer ta source dans le Forum Contribuez.
Sauf que tu fais une lecture sélective. :mouarf:
Auquel j'ai répondu :
et je termine mon post avec :
La réponse de mapmip (qui à ouvert ce sujet à été :
Je n'ai fait que répondre à mapmip qui se trouve justement l'instigateur de ce sujet ;)
et cette réponse ne peut consister en autre chose que de placer le code js de mon wrapper, avec même des précautions d'usage et un exemple de code..
A aucun moment je n'ai prétendu remplacer la fonction assign, même de manière subjective.
Merci de ne pas me faire dire ce que je n'ai pas écrit. ;)
aujourd'hui , est-ce que l'on peut utliser du ES6 ?
Vous, dans vos projets , vous mixer les 2 technos ?
pas de probleme de compatibilites avec les navigateurs actuels ?
ES2015 (ex ES6), ES2016 et ES2017 sont utilisables sur tous les navigateurs dignes de ce nom (Chrome, Firefox et Edge) lorsqu'ils sont à jour !
ES2018 arrive bientôt (http://2ality.com/2017/02/ecmascript-2018.html)
ES2015 free book online : http://exploringjs.com/es6/index.html
Tout dépends du contexte d'utilisation.
Si c'est pour un intranet de grande société, on regarde comment sont équipés les postes, il y en encore beaucoup qui sont resté en IE5 sur des PC sous XP.
Alors c'est jQuery 1.4 et ECMA-262... :(
Après cela dépend aussi du type de site, s'il est fait pour vendre des diamants et du caviar, tu peux taper dans les toutes dernières technos :mrgreen:
En gros, il n'y a pas de règles, on est tous à regarder les statistiques d'utilisation des navigateurs.
Amha, pour des sites grand public, c'est encore un peu tôt pour se lâcher complètement sur ECMAScript 2015,
mais ça devrai être jouable en fin d'année; mais c'est mon pif à moi :aie: