Object.assign vs $.extend

Question

Étant donné que j'utilise un objet immuable, je veux clone o copie un objet afin d'y apporter des modifications.

J'ai toujours utilisé la fonction native de javascript Object.assign mais il est tombé sur le site JQuery $.extend .

Je me demandais quelle était la meilleure façon de procéder et quelle était la différence exacte entre les deux ? En regardant la documentation, je n'arrive pas à trouver de différence notable sur les raisons de choisir l'une ou l'autre.

Answer 1

Les deux principales différences sont la présence d'un booléen optionnel pour deep qui est récursive sur la fusion jQuery $.extend (où la méthode false n'est pas pris en charge ? !) ...

let object1 = {
  id: 1,
  name: {
    forename: 'John',
    surname: 'McClane'
  },
};

let object2 = {
  id: 2,
  name: {
  }
};

// merge objects
let objExtend = $.extend(true, {}, object1, object2);
let objAssign = Object.assign({}, object1, object2);

// diff
console.log(objExtend.name.forename); // "John"
console.log(objAssign.name.forename); //  undefined

Object.assign() copie les valeurs des propriétés. Si la valeur source est une référence à un objet, elle ne copie que cette valeur de référence.

Exemple : JsFiddle

Le second est le $.extend ignore la méthode undefined ...

let object1 = {
  id: 1,
  name: 'hello world'
};

let object2 = {
  id: 2,
  name: undefined
};

// merge objects
let objExtend = $.extend({}, object1, object2);
let objAssign = Object.assign({}, object1, object2);

// diff
console.log(objExtend.name); // "hello world"
console.log(objAssign.name); //  undefined

Exemple : JsFiddle

Docs

MDN : Object.assign(target, ...sources)

jQuery : jQuery.extend([deep], target, object1 [, objectN])

En outre :

Si vous cherchez un moyen de fusionner des objets en profondeur sans jQuery, cette réponse est excellente :

Comment procéder à une fusion profonde au lieu d'une fusion superficielle ?

Exemple : JsFiddle

Comment réaliser une fusion profonde en utilisant Object.assign avec ES6 :

function isObject(item) {
  return (item && typeof item === 'object' && !Array.isArray(item));
}

function mergeDeep(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        mergeDeep(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }
  return mergeDeep(target, ...sources);
}