[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/assign [Back]  [Original]

Object.assign() - JavaScript | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Object.assign()

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

La mthode Object.assign() est utilise afin de copier les valeurs de toutes les proprits directes (non hrites) d'un objet qui sont numrables sur un autre objet cible. Cette mthode renvoie l'objet cible.

Dans cet article

Exemple interactif

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

Syntaxe

js
Object.assign(cible, ...sources);

Paramtres

cible

L'objet cible.

sources

Le(s) objet(s) source(s).

Valeur de retour

L'objet cible, ventuellement modifi, est renvoy.

Description

La mthode Object.assign permet de ne copier que les proprits numrables et propres (les proprits qui ne sont pas hrites) depuis un objet source vers un objet cible. Elle utilise [[Get]] sur l'objet source et [[Set]] sur l'objet cible, ainsi, elle dclenchera les accesseurs/mutateurs. De cette faon, elle affecte les proprits plutt que de juste les copier ou d'en dfinir de nouvelles. Aussi, il est dconseill d'utiliser cette mthode si on souhaite uniquement fusionner de nouvelles proprits dans un prototype si un des objets sources contient des accesseurs. Pour uniquement copier les dfinitions des proprits (y compris leur numrabilit) dans des prototypes, on utilisera plutt Object.getOwnPropertyDescriptor() et Object.defineProperty().

Les proprits String et Symbol sont copies. Les proprits de l'objet cible sont surcharges par celles de l'objet source si elles ont la mme cl.

En cas d'erreur, si une proprit n'est pas accessible en criture par exemple, une exception TypeError sera leve mais l'objet cible aura t modifi avec les proprits ajoutes avant l'erreur.

Object.assign ne donnera pas d'erreur si on fournit les valeurs null ou undefined pour la valeur source.

Exemples

Cloner un objet

js
var obj = { a: 1 };
var copie = Object.assign({}, obj);
console.log(copie); // {a: 1}

Note : Attention, pour un clone rel (deep clone), il faudra utiliser d'autres mthodes car Object.assign() ne copie que les valeurs des proprits depuis l'objet source, il ne recopie pas intgralement une nouvelle proprit. Si la valeur est une rfrence un objet, il copiera uniquement la rfrence.

Fusionner des objets

js
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, l'objet cible est aussi modifi

Fusionner des objets partageant des proprits

js
var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

Les proprits communes sont surcharges selon l'ordre des paramtres.

Copier des proprits symboliques

js
var o1 = { a: 1 };
var o2 = { [Symbol("toto")]: 2 };

var obj = Object.assign({}, o1, o2);
console.log(obj); // { a: 1, [Symbol("toto")]: 2 }
// Attention : dans Firefox le symbole n'est pas affich
// en raison du bug 1207182
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(toto)]

Les proprits hrites et les proprits non-numrables ne peuvent tre copies

js
var obj = Object.create(
  { toto: 1 },
  {
    // toto est hrite
    truc: {
      value: 2, // truc est non-enumerable (par dfaut)
    },
    bidule: {
      value: 3,
      enumerable: true, // bidule est une proprit propre et numrable
    },
  },
);

var copie = Object.assign({}, obj);
console.log(copie); // { bidule: 3 }

Les types primitifs seront passs en objets

js
var v1 = "abc";
var v2 = true;
var v3 = 10;
var v4 = Symbol("toto");

var obj = Object.assign({}, v1, null, v2, undefined, v3, v4);
// Les valeurs primitives seront converties, null et undefined seront ignors.
// Note : seules les chanes peuvent avoir des proprits numrables.
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

Les exceptions interrompent la copie

js
var target = Object.defineProperty({}, "toto", {
  value: 1,
  writable: false,
}); // target.toto est en lecture seule

Object.assign(
  target,
  { truc: 2 },
  { toto2: 3, toto: 3, toto3: 3 },
  { bidule: 4 },
);
// TypeError: "toto" est en lecture seule
// L'exception est leve lorsqu'on affecte target.toto

console.log(target.truc); // 2, le premier objet source est bien copi
console.log(target.toto2); // 3, la premire proprit du deuxime objet source est bien copie
console.log(target.toto); // 1, on a une exception ici
console.log(target.toto3); // undefined, assign est termin toto3 ne sera pas copi
console.log(target.bidule); // undefined, le troisime objet source ne sera pas copi non plus.

Copier des accesseurs

js
var obj = {
  toto: 1,
  get truc() {
    return 2;
  },
};

var copie = Object.assign({}, obj);
console.log(copie);
// { toto: 1, truc: 2 }, la valeur de copie.truc
// est la valeur renvoye par l'accesseur d'obj.truc.

// Voici une fonction qui copie les descripteurs
// dans leur intgralit
function completeAssign(target, ...sources) {
  sources.forEach((source) => {
    let descriptors = Object.keys(source).reduce((descriptors, key) => {
      descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
      return descriptors;
    }, {});
    // Par dfaut, Object.assign copie galement
    // les symboles numrables
    Object.getOwnPropertySymbols(source).forEach((sym) => {
      let descriptor = Object.getOwnPropertyDescriptor(source, sym);
      if (descriptor.enumerable) {
        descriptors[sym] = descriptor;
      }
    });
    Object.defineProperties(target, descriptors);
  });
  return target;
}

var copie = completeAssign({}, obj);
console.log(copie);
// { toto:1, get truc() { return 2 } }

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification
# sec-object.assign

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page