鉴于我使用的是不可变对象(immutable对象),我想克隆或复制一个对象以进行更改。
现在我一直在使用 javascript 的原生 Object.assign
但偶然发现了 JQuery $.extend
。
我想知道执行此操作的更好方法是什么,两者之间到底有什么区别?查看文档,我似乎无法真正找到关于为什么选择其中任何一个的区别。
最佳答案
两个关键区别是 deep
合并的可选 bool 值,它在 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() copies property values. If the source value is a reference to an object, it only copies that reference value.
示例: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 来深度合并对象的方法,这个答案非常好:
How to deep merge instead of shallow merge?
示例: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);
}
关于javascript - Object.assign 与 $.extend,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38345937/