对象简单及深度克隆(复制 拷贝)

除了数组和json数据要深度克隆,其他都可以=来复制,这种复制的差异主要是基本类型和引用类型之间的差别,为了理解深入,可以先去参考的文章

浅拷贝

基本类型的拷贝,利用=就可以实现,而如果引用类型(Array,Object)还是=来拷贝的话,就是浅拷贝

var arr=[1,2,3];
var arrobj=arr;
arrobj.push(5);
alert(arr)//[1,2,3,5]

可见对于引用类型的复制,操作的是引用对象而不是在内存中的实际的值,拷贝对象和被拷贝对象都指向内存中的同一个位置,一改则都改,
为了避免拷贝对象和被拷贝对象的互相的干扰,就需要深度拷贝;

深拷贝

所谓”深拷贝”,就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用”浅拷贝”就行了

//源码
function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
      if (typeof p[i] === 'object') {
        c[i] = (p[i].constructor === Array) ? [] : {};
        deepCopy(p[i], c[i]);//递归
      } else {
         c[i] = p[i];
      }
    }
    return c;
  }

延伸:$.extend()也有深拷贝和浅拷贝,想了解猛戳$.extend()

数组深拷贝

1.js的slice函数

arrayObj.slice(start, [end])

参数

1 2
arrayObj 必选项。一个 Array 对象。
start 必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。
end 可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。

说明

  • slice 方法返回一个 Array 对象,其中包含了 arrayObj 的指定部分。
  • slice 方法一直复制到 end 所指定的元素,但是不包括该元素。
  • 如果 start 为负,将它作为 length + start处理,此处 length 为数组的长度。
  • 如果 end 为负,就将它作为 length + end 处理,此处 length 为数组的长度。
  • 如果省略 end ,那么 slice 方法将一直复制到 arrayObj 的结尾。
  • 如果 end 出现在 start 之前,不复制任何元素到新数组中。
    例子
    var arr=[1,2,4,5]
    var arrobj=arr.slice(0);
    arrobj.push(7)
    alert(arrobj)//[1,2,4,5,7]
    alert(arr)//[1,2,4,5]
    //看一下slice具体的使用
    arr.slice(0)//[1, 2, 4, 5]
    arr.slice(0,4)//[1, 2, 4, 5]
    arr.slice(0,3)//[1, 2, 4]
    arr.slice(-1,3)//[]
    arr.slice(-3,3)//[2, 4]
    arr.slice(4,3)//[]
    arr.slice(1,-2)//[2]

2.js的concat函数

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

说明
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

var arr = ["One","Two","Three"];
var arrobj=arr.concat();

sunbaixin wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!