Object.assign vs $.extend

Учитывая, что я использую неизменяемый объект, я хочу клонировать или копировать объект для внесения изменений.

Теперь я всегда использовал javascript native Object.assign, но наткнулся на JQuery $.extend.

Мне было интересно, что это лучший способ сделать это и что именно разница между ними? Глядя на документацию, я, похоже, не могу найти заметную разницу в том, почему выбрать один из них.

Ответы

Ответ 1

Ключевым отличием является необязательный логический для deep merge, который является рекурсивным по методу jQuery $.extend...

let object1 = {
  id: 1,
  nested: { prop1: 10, prop2: 200 }, // nested object
};
let object2 = {
  id: 2,
  nested: { prop1: 20 }, // nested object
};

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

// diff
console.log( objExtend ); // has nested object prop2
console.log( objAssign ); // does not have nested object prop2.

Пример: JsFiddle

Документы

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

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

Обновление:

Если вы ищете способ слияния объектов без jQuery, этот ответ превосходный:

Как объединить слияние вместо мелкого слияния?

Пример: JsFiddle

Как выполнить глубокое слияние с помощью Object.assign с 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);
}