Disons que j'ai une optionsvariable et que je veux définir une valeur par défaut.

Quels sont les avantages / inconvénients de ces deux alternatives?

Utilisation de la propagation d'objets

options = {...optionsDefault, ...options};

Ou en utilisant Object.assign

options = Object.assign({}, optionsDefault, options);

C'est l' engagement qui m'a fait me demander.

Ce n'est pas nécessairement exhaustif.

Syntaxe de propagation

options = {...optionsDefault, ...options};

Avantages:

• Si vous créez du code pour une exécution dans des environnements sans prise en charge native, vous pourrez peut-être simplement compiler cette syntaxe (par opposition à l'utilisation d'un polyfill). (Avec Babel, par exemple.)

• Moins verbeux.

Désavantages:

• Lorsque cette réponse a été écrite à l'origine, il s'agissait d'une proposition , non standardisée. Lorsque vous utilisez des propositions, tenez compte de ce que vous feriez si vous écrivez du code avec celui-ci maintenant et qu'il n'est pas standardisé ou ne change pas à mesure qu'il se dirige vers la standardisation. Cela a depuis été normalisé dans ES2018.

• Littéral, pas dynamique.

Object.assign()

options = Object.assign({}, optionsDefault, options);

Avantages:

• Standardisé.

• Dynamique. Exemple:

  var sources = [{a: "A"}, {b: "B"}, {c: "C"}];
  options = Object.assign.apply(Object, [{}].concat(sources));
  // or
  options = Object.assign({}, ...sources);

Désavantages:

• Plus verbeux.
• Si vous créez du code pour une exécution dans des environnements sans prise en charge native, vous devez effectuer un polyfill.

C'est l'engagement qui m'a fait me demander.

Ce n'est pas directement lié à ce que vous demandez. Ce code n'utilisait pas Object.assign(), il utilisait le code utilisateur ( object-assign) qui fait la même chose. Ils semblent compiler ce code avec Babel (et le regrouper avec Webpack), ce dont je parlais: la syntaxe que vous pouvez simplement compiler. Ils ont apparemment préféré cela à l'obligation d'inclure object-assigncomme dépendance qui irait dans leur build.

Pour le reste / la répartition de l'objet de référence est finalisé dans ECMAScript 2018 comme étape 4. La proposition peut être trouvée ici .

Pour la plupart, la réinitialisation et la répartition des objets fonctionnent de la même manière, la principale différence est que la répartition définit les propriétés, tandis que Object.assign () les définit . Cela signifie que Object.assign () déclenche des setters.

Il convient de se rappeler qu'à part cela, le repos / propagation d'objet 1: 1 correspond à Object.assign () et agit différemment de la propagation de tableau (itérable). Par exemple, lors de la propagation d'un tableau, les valeurs nulles sont réparties. Cependant, l'utilisation de valeurs nulles réparties sur un objet est silencieusement répartie sur rien.

Exemple de propagation en tableau (itérable)

const x = [1, 2, null , 3];
const y = [...x, 4, 5];
const z = null;

console.log(y); // [1, 2, null, 3, 4, 5];
console.log([...z]); // TypeError

Exemple de propagation d'objet

const x = null;
const y = {a: 1, b: 2};
const z = {...x, ...y};

console.log(z); //{a: 1, b: 2}

Ceci est cohérent avec la façon dont Object.assign () fonctionnerait, les deux excluent silencieusement la valeur nulle sans erreur.

const x = null;
const y = {a: 1, b: 2};
const z = Object.assign({}, x, y);

console.log(z); //{a: 1, b: 2}

Je pense qu'une grande différence entre l'opérateur de diffusion et Object.assignqui ne semble pas être mentionnée dans les réponses actuelles est que l'opérateur de diffusion ne copiera pas le prototype de l'objet source vers l'objet cible. Si vous voulez ajouter des propriétés à un objet et que vous ne voulez pas changer de quelle instance il s'agit, alors vous devrez utiliser Object.assign. L'exemple ci-dessous devrait le démontrer:

const error = new Error();
error instanceof Error // true

const errorExtendedUsingSpread = {
  ...error,
  ...{
    someValue: true
  }
};
errorExtendedUsingSpread instanceof Error; // false

const errorExtendedUsingAssign = Object.assign(error, {
  someValue: true
});
errorExtendedUsingAssign instanceof Error; // true

Comme d'autres l'ont mentionné, à ce moment de la rédaction, il Object.assign()faut un polyfill et la propagation d'objet ...nécessite un transpilage (et peut-être aussi un polyfill) pour fonctionner.

Considérez ce code:

// Babel wont touch this really, it will simply fail if Object.assign() is not supported in browser.
const objAss = { message: 'Hello you!' };
const newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

// Babel will transpile with use to a helper function that first attempts to use Object.assign() and then falls back.
const objSpread = { message: 'Hello you!' };
const newObjSpread = {...objSpread, dev: true };
console.log(newObjSpread);

Ces deux produisent la même sortie.

Voici la sortie de Babel, vers ES5:

var objAss = { message: 'Hello you!' };
var newObjAss = Object.assign(objAss, { dev: true });
console.log(newObjAss);

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var objSpread = { message: 'Hello you!' };
var newObjSpread = _extends({}, objSpread, { dev: true });
console.log(newObjSpread);

Telle est ma compréhension jusqu'à présent. Object.assign()est en fait standardisé, alors que la propagation des objets ...ne l'est pas encore. Le seul problème est la prise en charge du navigateur pour les premiers et à l'avenir, les seconds aussi.

Jouez avec le code ici

J'espère que cela t'aides.

L'opérateur de propagation d'objet (...) ne fonctionne pas dans les navigateurs, car il ne fait pas encore partie d'une spécification ES, juste une proposition. La seule option est de le compiler avec Babel (ou quelque chose de similaire).

Comme vous pouvez le voir, c'est juste du sucre syntaxique sur Object.assign ({}).

Pour autant que je puisse voir, ce sont les différences importantes.

• Object.assign fonctionne dans la plupart des navigateurs (sans compilation)
• ... pour les objets n'est pas standardisé
• ... vous protège contre la mutation accidentelle de l'objet
• ... polyfill Object.assign dans les navigateurs sans elle
• ... a besoin de moins de code pour exprimer la même idée

Je voudrais résumer l'état de la fonctionnalité ES "fusion d'objets dispersés", dans les navigateurs et dans l'écosystème via des outils.

Spec

• https://github.com/tc39/proposal-object-rest-spread
• Cette fonctionnalité de langue est une proposition de l'étape 4 , ce qui signifie qu'elle a été fusionnée dans la spécification de langue ES, mais pas encore largement mise en œuvre.

Navigateurs: dans Chrome, dans SF, Firefox bientôt (ver 60, IIUC)

• Prise en charge par le navigateur des "propriétés de diffusion" livrées dans Chrome 60 , y compris ce scénario.
• La prise en charge de ce scénario ne fonctionne PAS dans Firefox actuel (59), mais fonctionne dans mon Firefox Developer Edition. Je pense donc qu'il sera livré dans Firefox 60.
• Safari: non testé, mais Kangax dit que cela fonctionne dans Desktop Safari 11.1, mais pas SF 11
• iOS Safari: non testé, mais Kangax dit que cela fonctionne dans iOS 11.3, mais pas dans iOS 11
• pas encore dans Edge

Outils: Node 8.7, TS 2.1

• NodeJS est pris en charge depuis la version 8.7 (via Kangax). Confirmé le 9.8 lorsque j'ai testé localement.
• TypeScript le supporte depuis 2.1 , le courant est 2.8

Liens

• Kangax "propagation de la propriété"
• https://davidwalsh.name/merge-objects

Exemple de code (sert également de test de compatibilité)

var x = { a: 1, b: 2 };
var y = { c: 3, d: 4, a: 5 };
var z = {...x, ...y};
console.log(z); // { a: 5, b: 2, c: 3, d: 4 }

Encore une fois: au moment de la rédaction de cet exemple, il fonctionne sans transpilation dans Chrome (60+), Firefox Developer Edition (préversion de Firefox 60) et Node (8.7+).

Pourquoi répondre?

J'écris ceci 2,5 ans après la question d'origine. Mais j'avais la même question, et c'est là que Google m'a envoyé. Je suis esclave de la mission de SO d'améliorer la longue queue.

Puisqu'il s'agit d'une extension de la syntaxe de «propagation de tableau», j'ai trouvé qu'il était très difficile de google, et difficile à trouver dans les tableaux de compatibilité. Le plus proche que j'ai pu trouver est Kangax "propagation de propriété" , mais ce test n'a pas deux spreads dans la même expression (pas une fusion). De plus, le nom dans les pages de propositions / brouillons / état du navigateur utilise tous "propriété répartie", mais il me semble que c'était un "premier principe" auquel la communauté est arrivée après les propositions d'utiliser la syntaxe répartie pour "fusion d'objets". (Ce qui pourrait expliquer pourquoi il est si difficile de google.) Je documente donc mes résultats ici afin que d'autres puissent afficher, mettre à jour et compiler des liens sur cette fonctionnalité spécifique. J'espère que ça va continuer. Aidez-nous à diffuser la nouvelle de son atterrissage dans la spécification et dans les navigateurs.

Enfin, j'aurais ajouté cette information en tant que commentaire, mais je n'ai pas pu les modifier sans casser l'intention originale des auteurs. Plus précisément, je ne peux pas modifier le commentaire de @ ChillyPenguin sans perdre son intention de corriger @RichardSchulte. Mais des années plus tard, Richard s'est avéré avoir raison (à mon avis). J'écris donc cette réponse à la place, en espérant qu'elle finira par gagner du terrain sur les anciennes réponses (cela pourrait prendre des années, mais c'est de cela qu'il s'agit après tout).

REMARQUE: la propagation n'est PAS seulement du sucre syntaxique autour d'Object.assign. Ils fonctionnent très différemment en coulisses.

Object.assign applique des setters à un nouvel objet, Spread ne le fait pas. De plus, l'objet doit être itérable.

Copier Utilisez ceci si vous avez besoin de la valeur de l'objet telle qu'elle est en ce moment et que vous ne voulez pas que cette valeur reflète les modifications apportées par d'autres propriétaires de l'objet.

Utilisez-le pour créer une copie superficielle de l'objet bonne pratique pour toujours définir des propriétés immuables sur copier - parce que les versions mutables peuvent être passées en propriétés immuables, la copie garantira que vous aurez toujours affaire à un objet immuable

Assigner Assigner est quelque peu l'opposé de copier. Assign génère un setter qui affecte directement la valeur à la variable d'instance, plutôt que de la copier ou de la conserver. Lors de l'appel du getter d'une propriété assign, il renvoie une référence aux données réelles.

Les autres réponses sont anciennes, impossible d'obtenir une bonne réponse.
L'exemple ci-dessous concerne les littéraux d'objets, explique comment les deux peuvent se compléter et comment ils ne peuvent pas se compléter (donc la différence):

var obj1 = { a: 1,  b: { b1: 1, b2: 'b2value', b3: 'b3value' } };

// overwrite parts of b key
var obj2 = {
      b: {
        ...obj1.b,
        b1: 2
      }
};
var res2 = Object.assign({}, obj1, obj2); // b2,b3 keys still exist
document.write('res2: ', JSON.stringify (res2), '<br>');
// Output:
// res2: {"a":1,"b":{"b1":2,"b2":"b2value","b3":"b3value"}}  // NOTE: b2,b3 still exists

// overwrite whole of b key
var obj3 = {
      b: {
        b1: 2
      }
};
var res3 = Object.assign({}, obj1, obj3); // b2,b3 keys are lost
document.write('res3: ', JSON.stringify (res3), '<br>');
// Output:
  // res3: {"a":1,"b":{"b1":2}}  // NOTE: b2,b3 values are lost

Plusieurs autres petits exemples ici, également pour tableau et objet:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Cela fait maintenant partie d'ES6, est donc normalisé et est également documenté sur MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Il est très pratique à utiliser et a beaucoup de sens à côté de la déstructuration d'objets.

Le dernier avantage répertorié ci-dessus est les capacités dynamiques d'Object.assign (), mais cela est aussi simple que de répartir le tableau à l'intérieur d'un objet littéral. Dans la sortie babel compilée, il utilise exactement ce qui est démontré avec Object.assign ()

Donc, la bonne réponse serait d'utiliser la diffusion d'objets car elle est désormais standardisée, largement utilisée (voir react, redux, etc.), est facile à utiliser et possède toutes les fonctionnalités d'Object.assign ()

Je voudrais ajouter cet exemple simple lorsque vous devez utiliser Object.assign.

class SomeClass {
  constructor() {
    this.someValue = 'some value';
  }

  someMethod() {
    console.log('some action');
  }
}


const objectAssign = Object.assign(new SomeClass(), {});
objectAssign.someValue; // ok
objectAssign.someMethod(); // ok

const spread = {...new SomeClass()};
spread.someValue; // ok
spread.someMethod(); // there is no methods of SomeClass!

Cela peut ne pas être clair lorsque vous utilisez JavaScript. Mais avec TypeScript, il est plus facile de créer une instance d'une classe

const spread: SomeClass = {...new SomeClass()} // Error