分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

深拷贝与浅拷贝js,方法

发布时间:2023-09-06 01:36责任编辑:郭大石关键词:js

在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。

参考Object.assign():https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

<!DOCTYPE html><html><head> ???<title>测试深拷贝,浅拷贝方法及现象</title></head><body> ???<script type="text/javascript"> ???????//Object.assign()方法是浅拷贝 ???????var myobject={ ???????????a:"a", ???????????b:"b", ???????????c:"c", ???????} ???????var newobject=Object.assign({},myobject); ???????newobject.a=222; ???????document.writeln("原始:"+JSON.stringify(myobject)); ???????document.writeln("现在:"+JSON.stringify(newobject)); ???????????????function test() { ?????????‘use strict‘; ?????????let obj1 = { a: 0 , b: { c: 0}}; ?????????let obj2 = Object.assign({}, obj1); ?????????console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} ???????????????????obj1.a = 1; ?????????console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} ?????????console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} ???????????????????obj2.a = 2; ?????????console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} ?????????console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} ???????????????????obj2.b.c = 3; ?????????console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} ?????????console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} ???????????????????// Deep Clone ?????????//利用json方法是深复制,但要JSON安全 ?????????obj1 = { a: 0 , b: { c: 0}}; ?????????let obj3 = JSON.parse(JSON.stringify(obj1)); ?????????obj1.a = 4; ?????????obj1.b.c = 4; ?????????console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} ???????} ???????test(); ???</script><!-- ????<script type="text/javascript"> ???????//这是浅拷贝,该变拷贝的对象会改变原始对象的值 ???????var arr = ["One","Two","Three"]; ???????var arrto = arr; ???????arrto[1] = "test"; ???????document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,test,Three ???????document.writeln("数组的新值:" + arrto + "<br />");//Export:数组的新值:One,test,Three ???</script> --> ????<!-- ?????<script type="text/javascript"> ???//这是深拷贝,该变现有对象不会改变原始对象的值 ????????????var arr = ["One","Two","Three"]; ???var arrtoo = arr.slice(0); ???arrtoo[1] = "set Map"; ???document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three ???document.writeln("数组的新值:" + arrtoo + "<br />");//Export:数组的新值:One,set Map,Three ????</script> --><!-- ?????<script type="text/javascript"> ???//这是深拷贝 ????????var arr = ["One","Two","Three"]; ???????var arrtooo = arr.concat(); ???????arrtooo[1] = "set Map To"; ???????document.writeln("数组的原始值:" + arr + "<br />");//Export:数组的原始值:One,Two,Three ???????document.writeln("数组的新值:" + arrtooo + "<br />");//Export:数组的新值:One,set Map To,Three ????</script> --><!-- ?????<script type="text/javascript"> ???//深拷贝,json方法是深拷贝 ????????var someobj={ ????????????a:"a", ????????????b:"b", ????????????c:"c" ????????} ????????var newobject=JSON.parse(JSON.stringify(someobj)); ????????someobj.a="aaaa"; ????????document.writeln("原始:"+JSON.stringify(someobj)+"<br/>"); ????????document.writeln("现在:"+JSON.stringify(newobject)+"<br/>"); ????????//原始:{"a":"aaaa","b":"b","c":"c"} ???????// 现在:{"a":"a","b":"b","c":"c"} ????</script> --> </body></html>

这里只是浅尝辄止,以后还会继续探究。

总结:浅拷贝Object.assign(),

      深拷贝用JSON.parse(JSON.stringify(someobj));

   但要保证someobj是json安全的,符合json规则。

深拷贝与浅拷贝js,方法

原文地址:https://www.cnblogs.com/wulinzi/p/8283814.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved