这篇文章主要讲解了“JavaScript浅拷贝的简单理解是什么，怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript浅拷贝的简单理解是什么，怎么实现”吧！

1、简单复制对象的最外层属性，不处理对象更深层次的对象属性，会导致复制对象和原始对象的深层次属性指向同一个内存。

2、如果一个对象改变了内存的地址，就会影响另一个对象。

将对象序列化为JSON字符串，然后通过JSON.parse()将字符串生成新的对象，实现深度复制。

实例

        let arr = [],
 obj = {
a: 1
}
for(let i = 0; i < 3; i++) {
 
arr.push(obj)
 
}
//　基本变量的值一般都是存在栈内存中，而对象类型的变量的值存储在堆内存中，栈内存存储对应空间地址。基本的数据类型: Number 、Boolean、Undefined、String、Null。
console.log(arr) //[{ a: 2 },{ a: 2 },{ a: 2 }] 内存地址被替换指向{a:2}
console.log(JSON.parse(JSON.stringify(arr))) //[{ a: 1 },{ a: 1 }]防止重新赋值
console.log(obj)//{a:1}
//当我们执行obj.a = 2 时，堆内存就有新的对象{a：2}，栈内存的b指向新的空间地址( 指向{a：2} )，而堆内存中原来的{a：1}就会被程序引擎垃圾回收掉，节约内存空间。
obj.a = 2
console.log(obj)//{a:2}
console.log(arr) //[{ a: 2 },{ a: 2 }]
 
console.log("//")
 
// 深拷贝  如果对象的属性值为一般类型（string， number），通过Object.assign({},srcObj)得到的新对象是深拷贝
let obj1 = {
a: 1,
b: 2
};
 
let obj2 = Object.assign({}, obj1, {
b: 20
});
 
console.log('obj1', obj1); // { a: 1, b: 2 }
console.log('obj2', obj2); // { a: 1, b: 20 }
 
console.log("//")
 
// 浅拷贝  如果属性值为对象或其它引用类型，通过Object.assign({},srcObj)得到的新对象是浅拷贝
obj1 = {
a: 1,
b: {
c: 2,
d: 3
}
};
obj2 = Object.assign({}, obj1);
obj2.a = 10;
obj2.b.c = 20;
console.log('obj1', obj1); // { a: 1, b: { c: 20, d: 3 } }
console.log("obj2", obj2) //{ a: 10, b: { c: 20, d: 3} }
console.log("//")
//Object.assign({})和Object.assign()   里面加与不加{}的区别   ;
var test1 = {
a: 'a'
},
 
test2 = {
b: {
c: 1
}
};
 
// Object.assign({}) 原始对象不会被改变
console.log(Object.assign({}, test1, test2)); //合并之后{ a: "a", b: {c:1} }
console.log(test1) // {a:'a'}
console.log(test2) // {b:{c:1}}
// Object.assign() 原始对象会被改变(改变的只是被覆盖的原始对象test2覆盖test1)
console.log(Object.assign(test1, test2)); //合并之后{ a: "a", b: {c:1} }
console.log(test1) //{ a: "a", b: {c:1} }
console.log(test2) // {b:{c:1}}
//当替换一下被覆盖的对象test1覆盖test2
console.log(Object.assign(test2, test1)); //合并之后{ a: "a", b: {c:1} }
console.log(test1) //{ a: "a"}此结果是在上面test2覆盖test1测试注释情况下得到,如果不注释打印得到{ a: "a", b: {c:1} },因为上面test1={ a: "a", b: {c:1} }
console.log(test2) // { a: "a", b: {c:1} }

推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

关于“JavaScript浅拷贝的简单理解是什么，怎么实现”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• ES6中Object.assign方法的作用是什么，怎么用

  这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• JS怎么实现动态添加圆圈序号效果?

  这篇文章给大家分享的JS实现动态添加圆圈序号效果。小编觉得挺实用的，而且这种效果的效果也比较美观，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• JS数组的filter()方法基本用法是什么，有什么要注意

  JS数组中filter方法的使用是什么？filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

• Vue中路由实现页面跳转不刷新怎么办，如何解决

  这篇文章主要介绍了Vue路由this.route.push跳转页面不刷新的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• vue怎样做多层循环表单验证？

  vue怎样做多层循环表单验证？表单验证我们之前也有了解过，这篇主要给大家分享的是使用vue + el-form 实现的多层循环表单验证的内容，实现代码如下，感兴趣的朋友可以参考。