salut,
connaissez vous un bon équivalent en ES5 de la fonction ES6 Object.assign ?
Merci d'avance
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 ...
Un polyfill comme dit par @Marco46 ou extend() de jQuery : http://api.jquery.com/jQuery.extend/
Blog
Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
(Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)
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 : 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 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..
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 jQuery
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
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.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 : Sélectionner tout - Visualiser dans une fenêtre à part
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" };
donne
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 Object.assign(dest, src); console.log("assign : ",JSON.stringify(dest,null, 2));• polyFill MDN :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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" }
donne
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 Object.polyFill (dest, src); console.log("polyFill : ",JSON.stringify(dest,null, 2));• forEach : qui peut convenir dans bien des cas
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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" }donne
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 Object.keys(src).forEach(function(ind) { dest[ind] = src[ind]; }); console.log('forEach : ',JSON.stringify(dest,null, 2));• jsoUpdate :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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" }
donne
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 dest.jsoUpdate(src); console.log('jsoUpdate : ',JSON.stringify(dest,null, 2));on est loin des autres ...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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![]()
Les joies du CSS | Réponses sur forum | Simple comme JS | Essais libres autour de l'API G$$gle Maps
✂ ---------------------------------------------
developpez.net c'est aussi :
✔ Les meilleurs cours et tutoriels pour apprendre le CSS
✔ Les meilleurs cours et tutoriels pour apprendre le (X)HTML
✔ Les meilleurs cours et tutoriels pour apprendre le JavaScript
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
Blog
Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
(Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)
Partager