js中的深拷贝和浅拷贝

·  阅读 168

深拷贝和浅拷贝只针对object,Array这样复杂对象的。

简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级

深浅拷贝的主要区别就是:复制的是引用(地址)还是复制的是实例。

浅拷贝含义:

            对于仅仅是复制了引用(地址),换句话说,复制了之后,原来的变量和新的变量指向同一个东西,彼此之间的操作会相互影响。

深拷贝含义:

           而如果是在堆中重新分配内存,拥有不同的地址,但是值是一样的,复制后的对象与原来对象完全隔离,互不影响。

01 浅拷贝

   有时候我们只是想要备份数组,但是只是简单让它赋给一个变量,改变其中一个,另一个就紧跟着改变,但很多时候,这不是我们想要的。

example:

            var arr = [ 1,2,3,"4" ];

            var arr2 = arr;

            arr2[1] = "test";

            console.log(arr);      //[ 1,"test",2,3,"4" ];

            console.log(arr2);    //[ 1,"test",2,3,"4" ];

02 深拷贝

(1) 数组

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

slice

var arr = ['a', 'b', 'c'];
var arrCopy = arr.slice(0);
arrCopy[0] = 'test'
console.log(arr); // ["a", "b", "c"]
console.log(arrCopy); // ["test", "b", "c"]复制代码


concat

var arr = ['a', 'b', 'c'];
var arrCopy = arr.concat();
arrCopy[0] = 'test'
console.log(arr); // ["a", "b", "c"]
console.log(arrCopy); // ["test", "b", "c"]复制代码

知识点补充:

  • arrayObj.slice(start, [end]) 该方法返回一个 Array 对象,其中包含了 arrayObj 的指定部分。不会改变原数组
  • arrayObj.concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。


(2)  对象

对象的深拷贝实现原理: 定义一个新的对象,遍历源对象的属性 并 赋给新对象的属性

var obj = {
   name:'Hanna Ding',
   age: 22
}

var obj2 = new Object();
obj2.name = obj.name;
obj2.age = obj.age

obj.name = 'xiaoDing';
console.log(obj); //Object {name: "xiaoDing", age: 22}
console.log(obj2); //Object {name: "Hanna Ding", age: 22}复制代码

我们就可以封装一个方法 deepCopy来实现对象的深拷贝,代码如下

var obj = {
    name: 'Hanna',
    age: 22
}
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 objCopy = deepCopy(obj)
obj.name = 'ding';
console.log(obj);//Object {name: "ding", age: 22}
console.log(objCopy);//Object {name: "Hanna", age: 22}复制代码


分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改