1. #1
    Membre actif Avatar de mapmip
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 185
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 185
    Points : 281
    Points
    281

    Par défaut Equivalent ES5 de Object.assign

    salut,

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

    Merci d'avance

  2. #2
    Modérateur
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    août 2005
    Messages
    3 150
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : août 2005
    Messages : 3 150
    Points : 10 903
    Points
    10 903

    Par défaut

    Ben à part un polyfill (par ex celui de MDN) je vois pas trop ...
    "Toute personne croyant qu'une croissance exponentielle peut durer indéfiniment dans un monde fini est soit un fou, soit un économiste."
    Kenneth E. Boulding

    "/home/earth is 102% full ... please delete anyone you can."
    Inconnu

    Trust me, i'm an engineer !
    https://www.youtube.com/watch?v=rp8hvyjZWHs

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 906
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 906
    Points : 21 544
    Points
    21 544
    Billets dans le blog
    50

    Par défaut



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

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

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

  4. #4
    Membre émérite Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 494
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 494
    Points : 2 985
    Points
    2 985

    Par défaut

    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..
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  5. #5
    Membre actif Avatar de mapmip
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 185
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 185
    Points : 281
    Points
    281

    Par défaut

    ca m'intéresse !

  6. #6
    Membre émérite Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 494
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 494
    Points : 2 985
    Points
    2 985

    Par défaut

    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.
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 558
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 558
    Points : 33 807
    Points
    33 807

    Par défaut

    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

  8. #8
    Membre émérite Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 494
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 494
    Points : 2 985
    Points
    2 985

    Par défaut

    @NoSmoking

    tu a du zapper en lecture deux ou trois trucs sur mon premier post.
    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 peut changer le type d'un des paramètres
    Mon Wrapper n'a jamais prétendu remplacer la fonction Assign de JavaScript;
    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]

    A mon tour de te proposer un test comparatif entre mon jsoUpdate et Assign.
    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
    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));
    ce qui donne :
    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"
    }
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 558
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 558
    Points : 33 807
    Points
    33 807

    Par défaut

    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
    connaissez vous un bon équivalent en ES5 de la fonction ES6 Object.assign ?
    et le résultat attendu est :
    Citation Envoyé par ECMAScript® 2015
    The assign function is used to copy the values of all of the enumerable own properties from one or more source objects to a target object.
    donc comme dit, ta fonction ne respecte pas la spécification de ES6 Object.assign, elle fait autre chose ...


    PS
    : par contre tu peux toujours proposer ta source dans le Forum Contribuez.

  10. #10
    Membre émérite Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 494
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 494
    Points : 2 985
    Points
    2 985

    Par défaut

    Sauf que tu fais une lecture sélective.

    Citation Envoyé par NoSmoking Voir le message
    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 :
    Citation Envoyé par mapmip Voir le message
    connaissez vous un bon équivalent en ES5 de la fonction ES6 Object.assign ?

    Auquel j'ai répondu :
    Citation Envoyé par psychadelic Voir le message
    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...
    et je termine mon post avec :
    Citation Envoyé par psychadelic Voir le message
    du coup je me suis fait un wrapper perso pour faire le job.
    Si ce post intéresse vraiment qq'1 je mettrai le code ici..
    La réponse de mapmip (qui à ouvert ce sujet à été :
    Citation Envoyé par mapmip Voir le message
    ca m'intéresse !
    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.
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  11. #11
    Membre actif Avatar de mapmip
    Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 185
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 185
    Points : 281
    Points
    281

    Par défaut

    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 ?

  12. #12
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 906
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 906
    Points : 21 544
    Points
    21 544
    Billets dans le blog
    50

    Par défaut

    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



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

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

  13. #13
    Membre émérite Avatar de psychadelic
    Profil pro
    Inscrit en
    mai 2010
    Messages
    1 494
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 1 494
    Points : 2 985
    Points
    2 985

    Par défaut

    Citation Envoyé par mapmip Voir le message
    aujourd'hui , est-ce que l'on peut utliser du ES6 ?
    Vous, dans vos projets , vous mixer les 2 technos ?
    pas de problème de compatibilités avec les navigateurs actuels ?
    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


    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
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

Discussions similaires

  1. [PHP 5.2] Attempt to assign property of non-object
    Par JCEYMER dans le forum Syntaxe
    Réponses: 2
    Dernier message: 13/07/2009, 13h46
  2. erreur :Cell contents assignment to a non-cell array object.
    Par lince102 dans le forum Interfaces Graphiques
    Réponses: 5
    Dernier message: 17/12/2007, 15h09
  3. [BO INFO] Equivalent Business Objects
    Par SebastienM dans le forum Débuter
    Réponses: 8
    Dernier message: 23/11/2007, 15h08
  4. [Object] Problèmes avec Assigned
    Par Clorish dans le forum Langage
    Réponses: 9
    Dernier message: 30/06/2005, 13h22
  5. Réponses: 4
    Dernier message: 04/03/2005, 17h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo