文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

理解JavaScript中的浅拷贝与深拷贝

2024-12-10 15:26

关注

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

var arr = ['aa','bb','cc'];

var arr2 = arr;

arr2[0] = '新来的';

console.log(arr);//输出 '新来的','bb','cc'

由此可见对数组arr2进行修改时,而arr内数据也会随之改变。这种直接赋值的方式就是浅拷贝现象。那到底是为什么呢?

因为JavaScript存储对象都是存地址的,所以浅复制会导致 arr 和 arr2 指向同一块内存地址,大概的示意图如下。

所以当修改arr2中的数据时,由于arr也指向此处,所以arr的数据也就被“修改了”。

深拷贝
一般都是开辟一块新的内存地址,将原对象的各个属性逐个复制出去。如下图所示


所以当修改arr2中的数据时,由于arr与arr2地址不同,所以arr的数据还是原来的。

数组的深拷贝
var arr = ['aa','bb','cc'];

var arr2 = arr.slice(0);

arr2[0] = "新来的";

console.log(arr);//输出:数组的原始值:'aa','bb','cc'

console.log(arr2);//输出:数组的新值:'新来的','bb','cc'

Json的深拷贝
在这里利用JSON下的两个方法来实现对象的深拷贝。

var json = {a:12,b:5};

var str = JSON.stringify(json);//这里将json内的数据转换成一个字符串存起来

var json2 = JSON.parse(str);//这里将字符串的内容"还原"成原来的"面目"

console.log(json2);//输出 {a:12,b:5}

总结
其实在js中还有很多方法能进行深拷贝,例如利用数组下的cancat方法;对Json进行遍历然后给新的对象等等。

补充
以上只考虑了纯数组或者纯对象(json串)的情况,当互相嵌套时确实有问题,经过查阅资料找到了一个函数

function cloneObject( obj, deep ){

if ( obj === null || obj === undefined || typeof (obj) !== 'object' ){

return obj;

}

var deep = !!deep;

var cloned = null;

if ( obj.constructor === Array ){

if ( deep === false ) return obj;

cloned = [];

for ( var i in obj ){

cloned.push( cloneObject( obj[i], deep ) );

}

return cloned;

}

cloned = {};

for ( var i in obj ){

cloned[i] = deep ? cloneObject( obj[i], true ) : obj[i];

}

return cloned;

}

var arr = [1, 3, 5, {a: 5}]

var newArr =cloneObject(arr,true);

newArr[3].a = 9

console.log(arr, newArr)

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯