Object.assign vs $ .extend

Question

鉴于我使用的是不可变对象,我想克隆或复制一个对象以进行更改.

现在我一直在使用javascript的本机,Object.assign但偶然发现了JQuery $.extend.

我想知道更好的方法是什么,两者之间的区别究竟是什么？看看文档,我似乎无法真正找到有关为何选择其中任何一个的可见差异.

Answer 1

两个关键的区别是deepmerge 的可选boolean,它在jQuery $.extend方法上是递归的(false不支持哪里？!)...

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()复制属性值.如果源值是对象的引用,则它仅复制该引用值.

示例:JsFiddle

第二种$.extend方法是忽略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

示例:JsFiddle

文件

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

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

另外:

如果您正在寻找一种在没有 jQuery的情况下深度合并对象的方法,那么这个答案非常好:

如何深度合并而不是浅合并？

示例:JsFiddle

如何使用Object.assignES6 进行深度合并:

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);
}