Object.assign vs $ .extend [英] Object.assign vs $.extend
问题描述
鉴于我使用的是不可变对象,我想克隆或复制对象以进行更改。
Given that I am using an immutable object, I want to clone or copy an object in order to make changes.
现在我一直在使用javascript的原生 Object.assign
但偶然发现了JQuery $ .extend
。
Now I have always been using javascript's native Object.assign
but stumbled upon the JQuery $.extend
.
我想知道更好的方法是什么,两者之间的区别究竟是什么?看看文档,我似乎无法真正找到一个值得注意的差异,为什么选择其中任何一个。
I was wondering what is the better way to do this and what exactly the difference is between both? Looking at the documentation I cannot seem to really find a mentionable difference concerning why to choose either one.
推荐答案
两个主要区别是 deep
merge的可选布尔值,它是jQuery $ .extend
方法的递归(其中不支持false
?!)...
The two key differences are the optional boolean for deep
merge which is recursive on the jQuery $.extend
method (where false
is not supported?!) ...
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()复制属性值。如果源值是对象的引用,则它仅复制该引用值。
Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.
示例: JsFiddle
第二个是 $ .extend
方法忽略 undefined
...
The second is the $.extend
method ignores 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的对象的方法,那么这个答案非常好:
If you are looking for a way to deep merge objects without jQuery, this answer is excellent:
E. xample : JsFiddle
如何使用 Object.assign
与ES6深度合并:
How to deep merge using Object.assign
with 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);
}
这篇关于Object.assign vs $ .extend的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!