小程序开发如何_js完成数组和对象的深浅拷贝

  • 栏目:行业动态 时间:2021-01-11 13:57 分享新闻到:
<返回列表

js实现数组和对象的深浅拷贝       这篇文章主要为大家详细介绍了js实现数组和对象的深浅拷贝,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前提:原始数据类型和对象类型赋值时的差异

JavaScript的数据类型分为原始数据类型和对象类型。二者在内存中存放的方式不同,导致了其赋值时差异。分别举个栗子

var x = 1;
 var y = x; //y获得了和x同样的值
 y = 2;
 console.log(x); // 1
 var m = [1,2]; //m存放的是指向[1,2]这个数组对象的引用地址
 var n = m; //n也获得 [1,2]数组对象的引用地址
 n[0] = 3;
 console.log(m); //[3,2] 

由上栗子可以看出 :原始数据类型赋值时,给的是实实在在的数据值 ,赋值后二者只是值一样而已,不会相互影响; 而对象类型,给的是 原数据的引用地址,所以新旧数据会互相影响,因为本质上还是同一个数据对象,如上栗中的数组 

什么是浅拷贝?

顾名思义,浅拷贝就是流于表面的拷贝方式;当属性值为对象类型时,只拷贝了对象数据的引用,导致新旧数据没有完全分离,还会互相影响。再举个栗子···

//测试数据
var array1 = ['a',1,true,{name:'lei',age:18}];
//concat() slice() 实现浅拷贝
var array2 = array1.concat()
//修改拷贝后的数据
array2[0] = 'b'; //array1[0]是原始数据类型 所以是直接赋值的
array2[3].name = 'zhang'; //array1[3]是对象数据类型 所以拷贝的是对象的引用,其实还是和原数组使用同一对象
console.log(array1); // ['a',1,true,{name:'zhang',age:18}]

栗子中 array2是array1的浅拷贝对象,数组元素是原始数据类型的不会相互影响了(array1[0]),但是array1[3]是对象类型,还是会互相影响。

如何实现浅拷贝

上栗中的  array.concat()或者array.slice() 是特殊的实现数组浅拷贝的方式。

如何自己实现呢?遍历对象/数组的每个属性,然后赋值给一个新的对象不就行了么,如下实现

 //实现浅拷贝
 function shallowCopy( target ){
 if(typeof target !== 'object') return ;
 //判断目标类型,来创建返回值
 var newObj = target instanceof Array [] : {};
 for(var item in target){
 //只复制元素自身的属性,不复制原型链上的
 if(target.hasOwnProperty(item)){
 newObj[item] = target[item]
 return newObj
 } /strong 
 //测试
 var test = [1,'a',{name:'lei',age:18}];
 var copy = shallowCopy(test);
 console.log(copy[2].name); //lei
 copy[2].name = 'zhang';
 console.log(test[2].name); //zhang 原数据也被修改

深拷贝及其实现

从浅拷贝解释基本可以明白,深拷贝就是 ‘完全'拷贝,拷贝之后新旧数据完全分离,不再共用对象类型的属性值,不会互相影响。

实现方式:

取巧方式 JSON.parse(JSON.stringify(Obj)) 

var test = [1,'a',{name:'lei',age:18}]; 
var copy1 = JSON.parse(JSON.stringify(test)); //特殊方式 
console.log(copy1); 
copy1[2].name = 'zhang'
console.log(test); //[1,'a',{name:'lei',age:18}] 未受到影响

注意:这种方式不能深拷贝有属性值为函数的对象,  可自行尝试

2. 实现深拷贝

  已经实现了浅拷贝,思考下应该是对 对象类型属性值赋值时,导致的没有完全分离,所以要修改下 拷贝对象类型属性值的方式,对它再调用一次深拷贝,这样就实现了深拷贝,如下:

//实现深拷贝
function deepCopy( target ){
 if(typeof target !== 'object') return ;
 //判断目标类型,来创建返回值
 var newObj = target instanceof Array [] : {};
 for(var item in target){
 //只复制元素自身的属性,不复制原型链上的
 if(target.hasOwnProperty(item)){
 newObj[item] = strong typeof target[item] == 'object' deepCopy(target[item]) : target[item] //判断属性值类型
 /strong }
 return newObj
var test = [1,'a',{name:'lei',age:18}];
var copy2 = deepCopy(test);
copy2[2].name = 'zhang'
console.log(test); ////[1,'a',{name:'lei',age:18}] 未受到影响

总结

一定要理解造成浅拷贝的原因:对象类型数据复制时,复制了引用地址,用的还是同一个数据对象;所以实现深拷贝的方式就是要对 对象类型属性值递归进行深拷贝,避免直接赋值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


分享新闻到:

更多阅读

小程序开发如何_js完成数组和对象的深浅

行业动态 2021-01-11
js完成数字能量数组和目标的浓淡复制 本文关键为大伙儿详尽详细介绍了js完成数字能量...
查看全文

广州凡科互联网科技股份有限公司招聘天

行业动态 2021-01-11
招聘人数:22职位信息任职资格职位名称:天猫店长 运营(康佳厨房电器类目)店铺信息:h...
查看全文

年后微信互动小游戏-小程序开发/微信小

行业动态 2021-01-10
极致微信小程序处理计划方案,让您轻轻松松盈利Perfect small program solution, make you easily profit...
查看全文
返回全部新闻


区域站点: 南丰县建站培训   南宫市建站程序   囊谦县凡科建站   南和县企业建站   南华县建站培训   南江县建站程序   南京市凡科建站   南靖县企业建站   南康市建站培训   南乐县建站程序   南陵县凡科建站   南宁市企业建站   南平市建站培训   南皮县建站程序   南市区凡科建站   南通市企业建站   南投县建站培训   南雄市建站程序   南溪县凡科建站   南阳市企业建站   南漳县建站培训   南召县建站程序   南郑县凡科建站   那坡县企业建站   那曲县建站培训   纳雍县建站程序   讷河市凡科建站   内黄县企业建站   内江市建站培训   内丘县建站程序   内乡县凡科建站   嫩江市企业建站   聂荣县建站培训   尼玛县建站程序   尼木县凡科建站   宁安市企业建站   宁波市建站培训   宁城县建站程序   宁德市凡科建站   宁都县企业建站   宁国市建站培训   宁海县建站程序   宁化县凡科建站   宁晋县企业建站   宁陵县建站培训   宁明县建站程序   宁南县凡科建站   宁强县企业建站   宁陕县建站培训   宁武县建站程序   宁乡市凡科建站   宁阳县企业建站   宁远县建站培训   农安县建站程序   磐安县凡科建站   盘锦市企业建站   盘山县建站培训   磐石市建站程序   盘州市凡科建站   蓬安县企业建站   澎湖县建站培训   蓬莱市建站程序   彭山县凡科建站   蓬溪县企业建站   彭阳县建站培训   彭泽县建站程序   彭州市凡科建站   偏关县企业建站   平安县建站培训   平昌县建站程序   平定县凡科建站   屏东县企业建站   平度市建站培训   平果县建站程序   平和县凡科建站   平湖市企业建站   平江县建站培训   平乐县建站程序   平凉市凡科建站   平利县企业建站   平罗县建站培训   平陆县建站程序   屏南县凡科建站   平泉市企业建站   屏山县建站培训   平顺县建站程序   平塘县凡科建站   平潭县企业建站   平武县建站培训   萍乡市建站程序   平乡县凡科建站   平阳县企业建站   平遥县建站培训   平阴县建站程序   平邑县凡科建站   平远县企业建站   平舆县建站培训   皮山县建站程序   普安县凡科建站   浦北县企业建站   浦城县建站培训   普洱市建站程序   普格县凡科建站   浦江县企业建站   普兰县建站培训   普宁市建站程序   莆田市凡科建站   迁安市企业建站   乾安县建站培训   潜江市建站程序   潜山市凡科建站  

友情链接: 医慧互通 创建网站教程 巴渝烤哥 美国免费建站平台 免费网页建站 免费自助建站 手机版

Copyright © 2002-2020 凡科建站_企业建站_建站培训_建站程序_自建网站 版权所有 (网站地图) 备案号:粤ICP备10235580号