jquery Object.assign vs $.extend

aurhwmvo  于 2023-04-20  发布在  jQuery
关注(0)|答案(1)|浏览(189)

我正在使用一个不可变对象,并希望克隆复制此对象以便对其进行更改。
我一直在使用内置的Object.assign(),最近偶然发现了jQuery的$.extend()
我想知道,什么是更好的方法来做到这一点,以及两者之间的区别是什么?
查看文档,我似乎找不到关于为什么选择这两种方法的显著区别。

mwg9r5ms

mwg9r5ms1#

两个关键的区别是deep merge的可选布尔值,它在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

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

文档

MDNObject.assign(target, ...sources)
jQueryjQuery.extend([deep], target, object1 [, objectN])

附加:

如果你正在寻找一种不使用jQuery深度合并对象的方法,这个答案很好:
How to deep merge instead of shallow merge?

示例JsFiddle

如何在ES6中使用Object.assign进行深度合并:

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

相关问题