Discussion :

[mapmip]

salut,

connaissez vous un bon �quivalent en ES5 de la fonction ES6 Object.assign ?

Merci d'avance

[Marco46]

Ben � part un polyfill (par ex celui de MDN) je vois pas trop ...

[danielhagnoul]

Un polyfill comme dit par @Marco46 ou extend() de jQuery : http://api.jquery.com/jQuery.extend/

[psychadelic]

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...

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"
*/

du coup je me suis fait un wrapper perso pour faire le job.
Si ce post int�resse vraiment qq'1 je mettrait le code ici..

[mapmip]

ca m'int�resse !

[psychadelic]

Je l'ai appel� jsoUpdate.
J'ai mis en commentaire un exemple d'utilisation.

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);
*/

attention, il fonctionne diff�remment de la propri�t� assign ou du truc de jQuery
, 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.

[NoSmoking]

Bonjour,

attention, il fonctionne diff�remment de la propri�t� assign ou du truc de jQuery

c'est le moindre que l'on puisse dire donc il ne respecte pas la sp�cification de ES6 assign.

Si l'on fait un rapide test on obtient sur base des objets suivants :

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"
};

� ES6 assign :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
Object.assign(dest, src);
console.log("assign : ",JSON.stringify(dest,null, 2));

donne

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"
}

� polyFill MDN :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
Object.polyFill (dest, src);
console.log("polyFill : ",JSON.stringify(dest,null, 2));

donne

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"
}

� forEach : qui peut convenir dans bien des cas

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));

donne

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"
}

� jsoUpdate :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
dest.jsoUpdate(src);
console.log('jsoUpdate : ',JSON.stringify(dest,null, 2));

donne

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"
}

on est loin des autres ...

pas test� jQuery

[danielhagnoul]

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