js深浅拷贝<转>

原文链接： http://mp.weixin.qq.com/s/wMgQpkGQHvYNVEtLxoweQw

 

使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

参考链接，关于Object.assign()：

http://blog.csdn.net/xiaobing_hope/article/details/54382217

Javascript 深浅拷贝

2017-02-16 野狗

 

 

Javascript有五种基本数据类型（也就是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型，就是对象

 

注意Undefined和Null的区别，Undefined类型只有一个值，就是undefined，Null类型也只有一个值，也就是null

 

Undefined其实就是已声明未赋值的变量输出的结果

null其实就是一个不存在的对象的结果

var c;
console.log(c)//undefined

console.log(document.getElementById('wsscat'))//没有id为wsscat的节点,输出null

简单的数据类型和复杂的数据类型有如下重要的区别

 

 

01对于简单数据类型

 

它们值在占据了内存中固定大小的空间，并被保存在栈内存中。当一个变量向另外一个变量复制基本类型的值，会建立这个值的一个副本，还有就是不能给基本数据类型的值添加属性

var a = 1; var b = a; a.attr = 'wsscat'; console.log(a.attr)//undefined

上面代码中a就是简单数据类型（Number），b就是a的副本，它们二者都占有不一样位置但相等的内存空间

 

 

02对于复杂的数据类型

 

复杂的数据类型即引用类型，它的值是对象，保存在堆内存中，包含引用类型值的变量实际上包含的并非对象自己，而是一个指向该对象的指针。从一个变量向另外一个变量复制引用类型的值，复制的实际上是指针，所以两个变量最终都指向同一个对象。

var obj = {
            name:'wsscat',            age:0        }        var obj2 = obj;        obj2['c'] = 5;        console.log(obj);//Object {name: "wsscat", age: 0, c: 5}        console.log(obj2);////Object {name: "wsscat", age: 0, c: 5} qq20161016-0

咱们能够看到obj赋值给obj2后，当咱们更改其中一个对象的属性值，两个对象都发生了改变，究其缘由局势由于obj和obj2这两个变量都指向同一个指针，赋值只是复制了指针，因此当咱们改变其中一个的值就会影响另一个变量的值

 

 

03浅拷贝

 

其实这段代码就是浅拷贝，有时候咱们只是想备份数组，可是只是简单让它赋给一个变量，改变其中一个，另一个就紧跟着改变，但不少时候这不是咱们想要的

var obj = {
            name:'wsscat',            age:0        }        var obj2 = obj;        obj2['c'] = 5;        console.log(obj);//Object {name: "wsscat", age: 0, c: 5}        console.log(obj2);////Object {name: "wsscat", age: 0, c: 5}

 

 

04深拷贝

 

数组

对于数组咱们可使用slice()和concat()方法来解决上面的问题

 

slice

var arr = ['wsscat', 'autumns', 'winds'];        var arrCopy = arr.slice(0);        arrCopy[0] = 'tacssw'        console.log(arr)//['wsscat', 'autumns', 'winds']        console.log(arrCopy)//['tacssw', 'autumns', 'winds']

 

concat

var arr = ['wsscat', 'autumns', 'winds'];        var arrCopy = arr.concat();        arrCopy[0] = 'tacssw'        console.log(arr)//['wsscat', 'autumns', 'winds']        console.log(arrCopy)//['tacssw', 'autumns', 'winds']

 

对象

对象咱们能够定义一个新的对象并遍历新的属性上去实现深拷贝

var obj = {
            name:'wsscat',            age:0        }        var obj2 = new Object();        obj2.name = obj.name;        obj2.age = obj.age        obj.name = 'autumns';        console.log(obj);//Object {name: "autumns", age: 0}        console.log(obj2);//Object {name: "wsscat", age: 0}

固然咱们能够封装好一个方法来处理对象的深拷贝，代码以下

var obj = {
            name: 'wsscat',            age: 0        }        var deepCopy = function(source) {            var result = {};            for(var key in source) {                if(typeof source[key] === 'object') {                    result[key] = deepCopy(source[key])                } else {                    result[key] = source[key]                }            }            return result;        }        var obj3 = deepCopy(obj)        obj.name = 'autumns';        console.log(obj);//Object {name: "autumns", age: 0}        console.log(obj3);//Object {name: "wsscat", age: 0}

 

✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦

 

做者：Wscats   原文：

https://github.com/Wscats/Good-text-Share/issues/57