原生JavaScript对象复制
2017-10-11 本文已影响0人
天乡墨客
简单深度复制
var a = {
a:1,
b:2,
c:{
d:4,
e:5
},
f:6
};
function simpleDeepClone(obj){
return JSON.parse(JSON.stringify(obj));
}
var c = simpleDeepClone(a);
console.log(a); //{a:1, b:2, c:{d:4, e:5}, f:6}
console.log(c); //{a:1, b:2, c:{d:4, e:5}, f:6}
a.g = 4;
console.log(a); //{a:1, b:2, c:{d:4, e:5}, f:6, g:4}
console.log(c); //{a:1, b:2, c:{d:4, e:5}, f:6}
c.h = 5;
console.log(a); //{a:1, b:2, c:{d:4, e:5}, f:6}
console.log(c); //{a:1, b:2, c:{d:4, e:5}, f:6, h:5}
对象合并或者称为浅复制(对象只是复制应用,原对象改变会影响新对象,新对象改变不会影响原来的对象)
// 会改变第一个对象参数的值
function mergeClone() {
var len = arguments.length;
var target;
if (typeof arguments[0] === 'object')
target = arguments[0];
else
target = arguments[0] = {};
for (var index = 1; index < len; index++) {
if (typeof arguments[index] === 'object')
target = Object.assign(target, arguments[index])
}
return target;
}
// 不会改变原有参数的值
function mergeClone() {
var target = {};
for (var index in arguments) {
if (typeof arguments[index] === 'object')
target = Object.assign(target, arguments[index])
}
return target;
}
// 上面的复制改变新对象对原有对象没有影响,但改变原有对象对新对象有影响
var a = {a:1, b:2, c:{d:4, e:5 }, f:6 };
var c = {hi: 'hi', hello: 'world'};
var newObj = mergeClone(a, c);
console.log(newObj) // {a:1, b:2, c:{d:4, e:5}, f:6, h:5, hello: 'world', hi: 'hi'}
// 在上面的consloe语句前面怎么加如下语句后打印出来的结果是:
a.c.d = 123;
console.log(newObj) // {a:1, b:2, c:{d:123, e:5}, f:6, h:5, hello: 'world', hi: 'hi'}
c.lol = 456;
console.log(newObj) // {a:1, b:2, c:{d:123, e:5}, f:6, h:5, hello: 'world', hi: 'hi'}
// 也就是说如果合并的对象里的属性是对象,他只是获取引用
高级深度复制
// 聪明的你早就看来了这个只是上面2个函数的合体
function deepClone() {
var target = {};
for (var index in arguments) {
if (typeof arguments[index] === 'object')
target = Object.assign(target, arguments[index])
}
return JSON.parse(JSON.stringify(target));
}
// 但是这样就完全可以旧对象中的子对象对变化对新对象的影响