JavaScript中的深拷贝和浅拷贝!【有错误】还未修改!请逛其他园子!

时间:2022-02-14 11:00:02

JavaScript中的深拷贝和浅拷贝!

浅拷贝

1.浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用.{也就是拷贝的是地址!简而言之就是在新的对象中修改深层次的值也会影响原来的对象!}

        // 2.深拷贝拷贝多层,每一-级别的数据都会拷贝.
var obj = {
id: 1,
name: 'andy',
msg: {
age: 23
}
};
var o = {};
// 浅拷贝!
// for (var k in obj) {
// o[k] = obj[k];
// }
// 也是浅拷贝!
// Object.assign( target, ... sources) es6新增方法可以浅拷贝
Object.assign(o, obj);
console.log(o)
console.log(obj)

JavaScript中的深拷贝和浅拷贝!【有错误】还未修改!请逛其他园子!

JavaScript中的深拷贝和浅拷贝!【有错误】还未修改!请逛其他园子!

深拷贝

   // 2.深拷贝拷贝多层,每一-级别的数据都会拷贝.
var obj = {
id: 1,
name: 'andy',
msg: {
age: 23
},
singer: ['小时姑娘', '东京塔子', '叶里']
};
var o = {};
// 用递归的方法实现对象的深拷贝!
// 封装函数
function deepCopy(newObj, oldObj) {
for (var k in oldObj) {
// 判断我们的属性值属于 哪种数据类型!
// 1 获取属性值 oldObj[k]
var item = oldObj[k];
// 2 判断这个值是否是数组!
if (item instanceof Array) {
newObj[k] = [];
deepCopy(newObj[k], item)
} else if (item instanceof Object) {
// 3 判断这个值是否是对象!
newObj[k] = {};
deepCopy(newObj[k], item)
} else {
// 4 于属简单数据类型!
newObj[k] = item;
} }
}
deepCopy(o, obj);
console.log(o)
o.msg.age = 8734823;
console.log(obj)

JavaScript中的深拷贝和浅拷贝!【有错误】还未修改!请逛其他园子!

JavaScript中的深拷贝和浅拷贝!【有错误】还未修改!请逛其他园子!

第二种实现深拷贝的方式 JSON.parse()

第一种用递归的方法实现深拷贝有点麻烦!下面介绍一种简单的!

 var nb = {
x: 1,
y: {
z: [false, null, '']
}
};
s = JSON.stringify(nb); // 将对象转换为字符串!
nnb = JSON.parse(s); // nnb 是 nb 的深拷贝!
console.log(nnb)

JavaScript中的深拷贝和浅拷贝!【有错误】还未修改!请逛其他园子!