专栏首页前端迷理解JS的深浅拷贝以及深度拷贝解决双向绑定的问题

理解JS的深浅拷贝以及深度拷贝解决双向绑定的问题

当我们利用v-bind:来绑定属性向子组件传递对象的时候,有时候我们需要子组件改变的时候不改变父组件的值,一般可以利用JSON.stringify(JSON.parse(jsonstr))将传递来的对象赋值到子组件自己的data,这样做的原理是对传过来的值重新赋予一个空间,从而解决双向绑定。,但是es6有一个深度赋值的方法也可以解决这个问题, let obj= Object.assign({}, obj)也可以解决。

比如一个数组(array)

浅度拷贝是当数组a变量成数组b的时候,b改变里面的数组数值的时候,a也随着改变。

浅度拷贝保存了一个指向该对象的指针,所有的操作都是对该引用的操作,所以对对象的修改会影响其他的复制对象。

深度拷贝是当当数组a变量成数组b的时候,b改变里面的数组数值的时候,a里面的数组数组不随着改变。

var arr = ["a", "b", "c", "d", "e"];      
var Arr = JSON.stringify(arr); //先转化为string字符串的类型
      
var Brr = JSON.parse(Arr); //在解析字符串的类型
Brr[1] = 'h';             //这样修改Brr中的数组的时候就不会影响到arr里面数组的值
console.log('arr:' + arr); //结果是arr:a,h,c,d,e
console.log("Arr:" + Brr); //结果是Arr:a,h,c,d,e

那么为什么浅度拷贝会改变a的数组值而深度拷贝则不会呢?

因为浅度拷贝指向的是同一个内存,而深度拷贝是增加了一个新的内存,所以不会影响到原来a的内存, 所 以就不会改变原来的值 eg.

var arr = ["a", "b", "c", "d", "e"];      
var Arr = arr;    
Arr[1] = 'h';     
console.log('arr:' + arr);  //arr的下标1的‘b’也变成了‘h’ 结果是:arr:a,h,c,d,e
console.log("Arr:" + Arr); //结果是:Arr:a,h,c,d,e

数组的深拷贝

对于数组的深拷贝常规的有三种方法:

方法一:遍历复制

var arr = ["a", "b"], arrCopy = [];
for (var item in arr) arrCopy[item] = arr[item];
arrCopy[1] = "c";
arr   // => ["a", "b"]
arrCopy   // => ["a", "c"]

考虑伪多维数组可以写成函数形式:

function arrDeepCopy(source){
    var sourceCopy = [];
    for (var item in source) sourceCopy[item] = typeof source[item] === 'object' ? arrDeepCopy(source[item]) : source[item];
    return sourceCopy;
}

这种方法简单粗暴,但是利用JS本身的函数我们可以更加便捷地实现这个操作。

方法二:slice()

可以参考 W3School 对 slice() 方法的描述:slice() 方法可从已有的数组中返回选定的元素。

调用格式为:

arrayObject.slice(start,end) 方法返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。该方法并不会修改数组,而是返回一个子数组。

在这里我们的思路是直接从数组开头截到尾:

arrCopy = arr.slice(0); arrCopy[1] = "c"; arr // => ["a", "b"] arrCopy // => ["a", "c"] 可以看出成功创建了一份原数组的拷贝。

方法三:concat()

可以参考 W3School 对 concat() 方法的描述: concat() 方法用于连接两个或多个数组。

调用格式为: arrayObject.concat(arrayX,arrayX,......,arrayX) 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

使用这种方法的思路是我们用原数组去拼接一个空内容,放回的便是这个数组的拷贝:

arrCopy = arr.concat();
arrCopy[1] = "c";
arr   // => ["a", "b"] 
arrCopy   // => ["a", "c"]

对象的深拷贝

对于数组的深拷贝我们有了概念,那么一般对象呢?

我们给出一个对象:

var obj = { "a": 1, "b": 2 };

同样做测试:

var objCopy = obj;
objCopy.b = 3;
obj   // => { "a": 1, "b": 3 }
objCopy   // => { "a": 1, "b": 3 }

同样,简单的赋值运算只是创建了一份浅拷贝。

而对于对象的深拷贝,没有内置方法可以使用,我们可以自己命名一个函数进行这一操作:

var objDeepCopy = function(source){
    var sourceCopy = {};
    for (var item in source) sourceCopy[item] = source[item];
    return sourceCopy;
}

但是对于复杂结构的对象我们发现这个函数并不适用,例如:

var obj = { "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 };

所以需要进行一点修改:

var objDeepCopy = function(source){
    var sourceCopy = {};
    for (var item in source) sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
    return sourceCopy;
}
var objCopy = objDeepCopy(obj);
objCopy.a.a1[1] = "a13";
obj   // => { "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 }
objCopy   // => { "a": { "a1": ["a11", "a13"], "a2": 1 }, "b": 2 }

3、对象数组的深拷贝

如果再考虑更奇葩更复杂的情况,例如我们定义:

var obj = [{ "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 }, ["c", { "d": 4, "e": 5 }]]; 这是一个由对象、数组杂合成的奇葩数组,虽然我们平时写程序基本不可能这么折腾自己,但是可以作为一种特殊情况来考虑,这样我们就可以结合之前说的方法去拓展拷贝函数:

var objDeepCopy = function (source) {
    var sourceCopy = source instanceof Array ? [] : {};
    for (var item in source) {
        sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item];
    }
    return sourceCopy;
}
var objCopy = objDeepCopy(obj);
objCopy[0].a.a1[1] = "a13";
objCopy[1][1].e = "6";
obj   // => [{ "a": { "a1": ["a11", "a12"], "a2": 1 }, "b": 2 }, ["c", { "d": 4, "e": 5 }]]
objCopy   // => [{ "a": { "a1": ["a11", "a13"], "a2": 1 }, "b": 2 }, ["c", { "d": 4, "e": 6 }]]

本文分享自微信公众号 - 前端迷(love_frontend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • QQ如何把你消息传递给好友的?(下篇)

    话说你已经成功注册了QQ号码,取名叫“村头小伙”。你的同学小芳“村里那个姑娘”也接受了你的好友申请。之后的日子里面,你们经常通过QQ发送文字和语音,偶尔还会视频...

    张叔叔讲互联网
  • 200行代码,一行行教你自制微信机器人

    1) 用一个windows客户端工具运营公众号,真的很局限。虽然工具的功能很强大,能自动添加好友,自动拉好友入群,关键字回复等等,但是有一个绕不开的点,它是一款...

    用户1634449
  • 猫头鹰的深夜翻译:Pattern: Service Mesh

    在十几年前,我们无法想象一个分布式系统会是什么样子。它给我们带来了全新的架构思路,但同时也引入了一些问题。 当时这些系统非常少有而且架构简单,工程师们通过尽可能...

    眯眯眼的猫头鹰
  • 迷人又诡异的辛普森悖论:同一个数据集是如何证明两个完全相反的观点的?

    在辛普森悖论中,餐馆可以同时比竞争对手更好或更差,锻炼可以降低和增加疾病的风险,同样的数据集能够用于证明两个完全相反的论点。

    大数据文摘
  • 一张图解释负载均衡

    首先当大量用户访问时候,先请求到nignx服务器,因为nignx对于高并发支持较好,所以由nignx服务器将访问需求分配给不同的apache服务器,apache...

    smy
  • 当妈妈在淘宝购物的时候,都发生了什么?(下篇)

    在上一篇文章中,讲到了你的妈妈成功从你手中夺得了电脑的控制权,然后打开了淘宝网并且在网站首页搜索框中搜索了“美丽的裙子”,之后用一种挑剔的眼光盯着电脑屏幕一个多...

    张叔叔讲互联网
  • 3.2、苏宁百万级商品爬取 思路讲解 商品爬取

    如果我要得到A类别的第B页的商品我应该如何拼接符合条件的地址 我们首先分析地址,地址如下

    小狐狸
  • TFS2018环境搭建一硬件要求

    TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的版本没有操作系统的位数限...

    郑小超.
  • python基础类型(一):字符串和列表

    注意到最后三个的单双引号是嵌套使用的,但是最后一个的使用方法是错误的,因为当我们混合使用两种引号时必须有一种用来划分字符串的边界,即在两边的引号不能出现在字符串...

    渔父歌
  • 一些常用的算法技巧总结

    数组的下标是一个隐含的很有用的数组,特别是在统计一些数字,或者判断一些整型数是否出现过的时候。例如,给你一串字母,让你判断这些字母出现的次数时,我们就可以把这些...

    帅地

扫码关注云+社区

领取腾讯云代金券